vue項(xiàng)目webpack中配置src路徑別名及使用方式
默認(rèn)會(huì)有‘@’別名，指向src目錄，還可以添加自定義別名等等。
使用方法
使用別名一般就三種情況：在js中用，在css中用，在html文檔內(nèi)用
js中用，最簡(jiǎn)單:
import {getName} from '@/util/name'css中使用，需要加入“~”，并且不要寫成字符串：
{
background: url(~@/assets/img/04_2.jpg);
background: url('~@/assets/img/04_2.jpg');//錯(cuò)了，這里有個(gè)坑，不能寫成字符串，我就是因?yàn)檫@樣寫錯(cuò)了
}html中使用，可以加入‘~’也可以不加入‘~’。
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
生產(chǎn)包遇到路徑問題
相信你看到這里，也曾經(jīng)無數(shù)次npm run build，在很多問題中就是因?yàn)槁窂匠霈F(xiàn)問題。
共享一個(gè)碰到的坑：
在config/index.js內(nèi)可以設(shè)置打包后根目錄，例如：
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/foreEnd/',//設(shè)置資源訪問時(shí)前綴，當(dāng)設(shè)置后，例如圖片，css，js等文件的路徑就會(huì)變?yōu)?foreEnd/……的絕對(duì)路徑，你可以設(shè)置為‘./'保持相對(duì)路徑。圖片以及一些靜態(tài)資源盡量放入src/assets目錄內(nèi)，不要放入static目錄內(nèi)，訪問不易出錯(cuò)。以@/assets/……方式訪問。
在寫路徑時(shí)候，盡量不要使用絕對(duì)路徑，請(qǐng)使用@別名方式訪問資源。
在js文件或者vue文件的script標(biāo)簽中使用
（1）、js文件中導(dǎo)入示例：
（2）、vue文件中導(dǎo)入示例：
css（scss）文件在scss或者vue的style標(biāo)簽中導(dǎo)入示例
（1）、在scss文件中導(dǎo)入示例：
（2）、在vue的style標(biāo)簽中導(dǎo)入示例：
注意：css或者scss樣式導(dǎo)入需要使用 ~@ 開頭。
在vue的template模板標(biāo)簽中引入圖片路徑示例（兩種方式均可使用）
（1）、使用 ~@ 方式引入：
（2）、使用 @ 方式引入：
（3）、在scss 自定義方法中使用時(shí)必須使用 ~@ 方式引入：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element多選級(jí)聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關(guān)于vue+element多選級(jí)聯(lián)選擇器自定義props使用的相關(guān)資料,級(jí)聯(lián)選擇器展示的結(jié)果都是以數(shù)組的形式展示,也就是v-model綁定的結(jié)果,需要的朋友可以參考下2023-07-07
Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
Vue動(dòng)態(tài)修改網(wǎng)頁標(biāo)題的方法及遇到問題
Vue下有很多的方式去修改網(wǎng)頁標(biāo)題，這里總結(jié)下解決此問題的幾種方案:,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue中slot的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue.js編譯時(shí)給生成的文件增加版本號(hào)
這篇文章主要介紹了vue.js編譯時(shí)給生成的文件增加版本號(hào)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router.push()
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router.push()，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
element-ui修改el-form-item樣式的詳細(xì)示例
在使用element-ui組件庫的時(shí)候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細(xì)示例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
Vue Element前端應(yīng)用開發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中，菜單也屬于權(quán)限控制的一個(gè)資源，屬于角色控制的一環(huán)。不同角色用戶，登錄系統(tǒng)后，出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合，實(shí)現(xiàn)可訪問路由的過濾，也就實(shí)現(xiàn)了對(duì)應(yīng)角色菜單的展示和可訪問路由的控制。2021-05-05
vue實(shí)現(xiàn)標(biāo)簽云效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11