vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...

注意：

如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的)

还有就是可能是创建的icons不在src根目录(最开始我尝试在assets中创建文件来装svg图标，但是并没有显示，换到根目录就正常了,具体应该是那里还是有点问题，按道理讲应该是放到assets中也是可以的以后空了研究暂时这样)

一、安装svg加载插件： npm i svg-sprite-loader -D

二、定义svg组件

export default {

name: 'icon',

props: {

name: {

type: String,

default: 'home'

}

},

computed: {

iconName () {

return `#icon-${this.name}`

}

}

}

svg {

fill: currentColor;

overflow: hidden;

}

默认属性设置可以根据自己需要设定。

三、在src根目录创建装svg的文件夹并创建index.js文件

文件结构

index.js内容

import Vue from 'vue'

import Icon from '@/components/icon'

Vue.component('icon', Icon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./', false, /\.svg$/)

requireAll(req)

这个文件没有什么需要处理的基本都是这样写，如果对requireContext不是很理解可以google一下这个requireContext()就知道了。

四、main.js中全局引用组件

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import './common/common.scss'

import '@/icons'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

五、webkit.base.conf.js规则修改：

添加这部分规则：

{

test: /\.svg$/,

loader: 'svg-sprite-loader',

include: [resolve('src/icons')],

options: {

symbolId: 'icon-[name]'

}

}

修改规则：

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

exclude: [resolve('src/icons')],

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

完成，现在可以全局调用：

Vue3.0+ts配置(不用ts的话就和2.x相同只是规则写法有点不同，可以直接参考规则写法)

vue3.0+ts无法使用Vue.component()，所以index.ts文件内容有点不同这里直接上代码

index.ts

3.0 版本是可以将svg图片放到assets里面到

然后是main.ts中全局注册

main.ts文件

还有基本配置，3.0是链式配置，并且需要先清楚掉默认到svg规则，不清除是不生效的，(还有是写在vue.config.js的，自己建的文件)

chainWebpack: config => {

const svgRule = config.module.rule('svg')

svgRule.uses.clear()

svgRule

.test(/\.svg$/)

.include.add(resolve('./src/assets/icons'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.tap(options => {

options = {

symbolId: 'icon-[name]'

}

return options

})

}

其它基本是和2.x相同的

总结

以上是生活随笔为你收集整理的vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。