vue3+vue-cli4中使用svg的方式詳解(親測可用)
技術棧：vue3+vue-cli4
前言：
目前大多數是基于vue2引入，所以想基于vue3需要做一些改動（注意該方法是基于vue-cli中使用的，因為webpack提供了require.context()，基于vite構建的項目則不能使用該文章提供的方法）
一、安裝 svg-sprite-loader
npm install svg-sprite-loader --save-dev
二、在src/components/svgIcon下新建組件index.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" rel="external nofollow" ></use>
</svg>
</template>
<script>
import { computed } from "@vue/reactivity";
export default {
name: "baseSvgIcon",
props: {
iconClass: { type: String },
className: { type: String },
},
setup(props) {
const iconName = computed(() => {
return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
});
const svgClass = computed(() => {
return props.className ? "svg-icon " + props.className : "svg-icon";
});
return { iconName, svgClass };
},
};
</script>
<style scoped lang="scss">
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
三、在assets在創(chuàng)建icons文件夾
imgs文件夾里含一個svg文件夾，放svg格式文件，以及一個index.js文件，該文件內容如下
// 獲取當前目錄所有為.svg的文件
const req = require.context('./svg', false, /\.svg$/)
// 解析獲取的.svg文件的文件名稱并返回
const requireAll = (requireContext) =>{
return requireContext.keys().map(requireContext)
}
requireAll(req)
四、在src同級下創(chuàng)建vue.config.js進行配置
經評論區(qū)總結，如果是在非vue-cli4的項目中，在config.module.rules.delete("svg");報錯的話，可以嘗試使用config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();替換該語句
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg"); // 重點：刪除默認配置中處理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/assets/imgs')) // 處理svg目錄
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
};
五、在main.js里引入，以及做一些小修改
此處注意，將組件注冊放到main.js里。不然會報[Vue warn]: Failed to resolve component: svg-icon的問題，預測為父組件先創(chuàng)建完了而子組件還沒創(chuàng)建進去，導致該問題的出現(xiàn)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/icons'
const app = createApp(App)
import SvgIcon from '@/components/svgIcon'
app.component('svg-icon', SvgIcon)
app.use(store).use(router).mount('#app')
六、在頁面中使用
<div class="topLeft"> <svg-icon icon-class="category"></svg-icon> </div> <div class="topCenter"></div> <div class="topRight"> <svg-icon icon-class="search"></svg-icon> </div>
七、文件目錄結構及其效果展示
八、參考鏈接地址
1、如果是vue2進行使用的可以參考該文章：https://www.jianshu.com/p/cb67bb4a79f2
2、我看到過的另一種解決思路，將index.js文件里的內容放入到main.js里，但我覺得分開層次更清晰，該解決方案在該文章的評論里：https://zhuanlan.zhihu.com/p/335107384
3、在vite中使用svg的可以參考我另一篇文章：http://chabaoo.cn/article/258650.htm
4、評論區(qū)里有人成功了，我上傳一版demo放到gitee里了，有問題的地方大家可以對照看看：https://gitee.com/zasulan/csdn-item/tree/master/vue-music-app，重新上傳了一版無node-scss的版本，因為大家的node版本或者vue-cli版本可能不一致，npm install會報錯因此去除，有需要可自行安裝
總結
到此這篇關于vue3+vue-cli4中使用svg的文章就介紹到這了,更多相關vue3+vue-cli4使用svg內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文分步驟給大家介紹vue給不同環(huán)境配置不同打包命令的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
本文通過實例代碼給大家介紹了Vue實現(xiàn)搜索 和新聞列表功能簡單范例，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2018-03-03
這篇文章主要介紹了vue實現(xiàn)折疊展開收縮動畫,通過scrollHeight實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
自動安裝的vue-router，會在src 文件夾下有個一個 router -> index.js 文件 在 index.js 中創(chuàng)建 routers 對象，引入所需的組件并配置路徑。這篇文章主要介紹了vue-router的使用,需要的朋友可以參考下2018-08-08
本文主要介紹了Vue3中watch監(jiān)聽器及源碼學習,Watch偵聽器在Vue3中特性進行了一些改變和優(yōu)化,下面來詳解的介紹一下基本使用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
本文主要介紹了Vue.js項目在IE11白屏報錯的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
這篇文章主要介紹了vue 本地服務不能被外部IP訪問的解決方法,本文通過代碼講解的非常詳細，需要的朋友可以參考下2018-10-10
最近在自己寫頁面,然后寫登錄注冊UI的時候需要一個驗證碼組件,去搜一下沒找到什么合適的,于是自己寫一個,這篇文章主要給大家介紹了關于Vue實現(xiàn)驗證碼登錄的相關資料,需要的朋友可以參考下2022-03-03
今天小編就為大家分享一篇Vue實例的對象參數options的幾個常用選項詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下2017-09-09