在 Vue CLI 3 中配置 svg-sprite-loader

,

安装

1
npm install svg-sprite-loader --save-dev

配置

在 Vue.config.js 中加入如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require('path')

function resolve(dir) {
    return path.join(__dirname, '.', dir)
}

module.exports = {
    chainWebpack: config => {
        // 删除默认配置中处理svg
        config.module.rules.delete('svg')
        config.module
            .rule('svg-sprite-loader')
            .test(/\.svg$/)
            .include
            .add(resolve('src/icons')) // 处理svg目录,根据实际情况修改
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
            symbolId: '[name]'
        })
    }
}

当然其他的 webpack 配置也可以在 Vue.config.js 中配置，包括反向代理等等。具体可查看这里。

参考文章