解决Vue cli 4.0 自动导入svg的问题

最新推荐文章于 2024-06-21 10:17:25 发布

不爱格子衬衫的程序员

最新推荐文章于 2024-06-21 10:17:25 发布

阅读量857

点赞数 1

分类专栏： vue 文章标签： vue.js html javascript css es6

本文链接：https://blog.csdn.net/m0_47665999/article/details/106548210

版权

本文介绍了如何在Vue CLI 4.0项目中设置自动导入SVG图标，包括安装svg-sprite-loader和svgo，配置vue.config.js，创建icons目录和相关文件，以及在main.js中引入SVG。

摘要由CSDN通过智能技术生成

网上大多数的教程都是vue cli旧版的。使用vue cli 3/4搭建项目使用svg自动导入的方法：

1、安装 svg-sprite-loader、svgo这两个库

npm install --save-dev vue-svg-sprite-loader
npm install -g svgo

2、在根目录创建vue.config.js，如果存在就不需要创建，然后添加一下配置

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

module.exports = {
    devServer: {
        disableHostCheck: true
    },
    chainWebpack(config) {
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .en