vue-cli 3项目使用svg一路填坑

先安装svg的loader
npm install svg-sprite-loader --save-dev

并没有效果,因为没有配置

但是项目是用vue-cli3版本创建的,首先项目的目录结构和以前相比有变化。
没有了config、build等目录
q:webconfig在哪里配置?
a : 在根目录新建vue.config.js
// vue.config.js
module.exports = {
chainWebpack: config => {

// 一个规则里的 基础Loader
// svg是个基础loader
const svgRule = config.module.rule('svg')

// 清除已有的所有 loader。
// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()

// 添加要替换的 loader
svgRule
    .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
            })
    
  }

}

参考:
https://cli.vuejs.org/zh/guide/webpack.html#%E4%BF%AE%E6%94%B9-loader-%E9%80%89%E9%A1%B9
https://github.com/mozilla-neutrino/webpack-chain
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/base.js

推荐阅读更多精彩内容