Question

我正在vue-cli项目中使用Vue 2.6.10。我想在此项目中仅将SVG加载程序用于特定目录中的SVG文件。这些是我目前在vue.config.js

中的规则

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  },

这有效-但可以在所有SVG文件上运行。

我已经看到了一些针对Webpack的 include 和 exclude 规则，但是我不确定在这种情况下如何应用它们。

Answer 1

https://github.com/neutrinojs/webpack-chain在这里使用。我遇到的问题是，在为vue-svg-loader添加限制之后，我必须为所有其他svg文件定义file-loader规则。

我有两个文件夹，/icons/inline代表vue-svg-loader，而/icons/plain代表必须作为文件的默认svg。这对我有用：

chainWebpack: (config) => {
  config.module.rule('svg').uses.clear()

  config.module
    .rule('svg')
    .test(/\/icons\/inline\/.*\.svg$/)
    .use('babel-loader')
      .loader('babel-loader')
      .end()
    .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .end()

  config.module
    .rule('svg-file')
    .test(/\/icons\/plain\/.*\.svg$/)
    .use('file-loader')
      .loader('file-loader')
      .end()
}

仅将SVG Loader添加到Vue-cli项目中的特定目录

1 个答案: