先安装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
网友评论