svg在vue cli3中的配置

2022-07-20 06:18:10 字數 987 閱讀 5461

svg向量圖有時候在專案中用起來當然要比用起來好。之前沒有用過svg,這次花了一點時間在專案中支援了svg的使用,個人感覺用起來還是沒有直接用font class的爽,然後又改成font class的使用,如下我說一下我是如何配置svg和font class的(這兩者都是iconfont 的不同使用方法):

1. 在package.json中引入svg-sprite-loader

2. 在vue.config.js中配置webpack,**如下:

chainwebpack: config =>)

}

3. 在src下邊建立乙個icons資料夾(裡面放需要用到的svg圖示)

4.再寫乙個全域性通用的元件svgicon.vue

/*

svg-icon的用法:

1. **上找到自己需要的圖示

4. 在別的檔案中引用(import 'icons/***.svg')

5. 使用

5. 因為上邊的這個元件是全域性通用的,所以要在專案載入的第一時間把它註冊到全域性vue中去,在入口檔案main.js中設定

import svgicon from 'components/svgicon'。。。

vue.component('svg-icon', svgicon)

6. 經上邊的設定後,npm install ,重新build專案之後就可以了(像上邊看到的icons 或 components,都是在配置檔案中新增的路徑別名)

1. 在建立乙個的專案,然後把自己設計的svg圖示上傳到自己的專案下邊(也可以把別的專案裡面的圖示加到購物車,再新增到自己的專案裡)

2. 拷貝專案下邊生成的fontclass**(.css**)

3. 挑選相應圖示並獲取其類名,應用於網頁:

Vue cli3配置說明

關於 以及process.env.使用和說明 scripts 以上是package.json中的一段指令碼。可看到我們的執行命令後面就會跟著mode,mode對應的值分別都有對應的檔案,如上mode分別有dev prod test三種模式,對應的專案中就會有三個檔案.env.dev env.prod...

vuecli3熱更新配置

我們在使用vuecli3的時候難免會遇到儲存 但是頁面不能自動重新整理 熱更新 的問題,今天分享一下我的熱更新的配置 chainwebpack config 只要在chainwebpack的配置項下加一行config.resolve.symlinks true 這樣我們修改儲存.vue檔案以及js ...

vue cli3的多環境配置

node env development development 開發環境介面位址 env.production 生產環境檔案 node env production production 生產環境介面位址 env.test 測試環境檔案 node env production test 測試環境介...