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

网上大多数的教程都是vue cli旧版的，通过这些教程导入Vue cli 4.0 可能会出问题。使用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]'
            })
            .end()
    }
}

3、在src的目录下创建一个icons文件夹、再创建一个index.js、mysvg.vue(这个vue组件命名随意)和创建一个svg文件夹这个文件夹是存放svg的mysvg 文件的代码，仅供参考

<template>
    <svg :class="svgClass" aria-hidden="true" mode="open" v-on="$listeners" :style="{width: size,height:size}">
        <use :xlink:href="iconName"/>
    </svg>
</template>
 
<script>
    // 这里添加了一个size prop 是用来在外部控制svg的大小
    export default {
        name: 'SvgIcon',
        props: {
            iconClass: {
                type: String,
                required: true
            },
            className: {
                type: String,
                default: ''
            },
            size: {
                type: String,
                default: '14px'
            }
        },
        computed: {
            iconName() {
                return `#icon-${this.iconClass}`
            },
            svgClass() {
                if (this.className) {
                    return 'svg-icon ' + this.className
                } else {
                    return 'svg-icon'
                }
            }
        }
    }
</script>
 
<style scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

index.js 文件配置

// index文件配置
 
import Vue from 'vue'
import SvgIcon from './mysvg'// svg组件
 
// register globally
Vue.component('svg-icon', SvgIcon)
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4.然后在 mian.js 中引用index.js

欢迎评论点赞！您的支持是我创作的动力！感谢支持！
欢迎关注公众号“程序员转管理”获取更多优质文章