vue.config.js 配置 svg

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> // 使用