1. 安装svg的loader
npm install svg-sprite-loader --save-dev
yarn add svg-sprite-loader
2. 根目录新建vue.config.js
vue.config.js 配置如下 (ps : 这是自己工作时的配置, 每个人的需求不同,按需配置即可)
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
baseUrl: './',
outputDir: 'dist',
lintOnSave: false,
chainWebpack: config => {
// 替换路径
config.resolve.alias
.set("views", resolve("src/views"))
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, {
limit: 10240
}));
// 设置svg
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
productionSourceMap: true, // 生产生成 sourceMap 文件
devServer: {
proxy: { // 代理
"/api": {
target: "http://192.168.1.100:8080/",
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
},
// cookiePathRewrite: { // 是否携带cookie
// '/svc-prod-app': '/'
// }
},
}
}
}
3. 使用
我用的是滴滴的 mand-mobile 里面有配置svg
import "@/assets/svg/gou.svg"; // 引入
<md-icon name="icon-gou"></md-icon> // 使用