注意：

如果按照下面配置正確發現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...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。