当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 解决Vue cli 4.0 自动导入svg的问题

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

网上大多数的教程都是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]'
            })
            .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;
    }

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)

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

本文地址：https://blog.csdn.net/tp27933/article/details/107370400

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网