javascript - 仅针对特定目录将 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 的包含和排除规则，但我不确定你将如何在这种情况下应用它们。

标签： javascriptvue.jssvgwebpackwebpack-loader

Answer 1

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

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

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()
}