仅针对特定目录将 SVG Loader 添加到 Vue-cli 项目

【问题标题】：Adding SVG Loader to Vue-cli project for a specific directory only仅针对特定目录将 SVG Loader 添加到 Vue-cli 项目
【发布时间】：2020-02-11 23:06:19
【问题描述】：

我在 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 规则，但我不确定您将如何在这种情况下应用它们。

【问题讨论】：

标签： javascript vue.js svg webpack webpack-loader

【解决方案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()
}

【讨论】：