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

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 项目

Adding SVG Loader to Vue-cli project for a specific directory only

javascript

svg

webpack

vue.js

webpack-loader