默認(rèn)會有‘@’別名，指向src目錄，還可以添加自定義別名等等。

使用方法
使用別名一般就三種情況：在js中用，在css中用，在html文檔內(nèi)用
js中用，最簡單:

import {getName} from '@/util/name'

css中使用，需要加入“~”，并且不要寫成字符串：

{background: url(~@/assets/img/04_2.jpg);background: url('~@/assets/img/04_2.jpg');//錯了，這里有個坑，不能寫成字符串，我就是因為這樣寫錯了 }

html中使用，可以加入‘~’也可以不加入‘~’。

<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">

生產(chǎn)包遇到路徑問題
相信你看到這里，也曾經(jīng)無數(shù)次npm run build，在很多問題中就是因為路徑出現(xiàn)問題。
共享一個碰到的坑：
在config/index.js內(nèi)可以設(shè)置打包后根目錄，例如：

build: {index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/foreEnd/',//設(shè)置資源訪問時前綴，當(dāng)設(shè)置后，例如圖片，css，js等文件的路徑就會變?yōu)?foreEnd/……的絕對路徑，你可以設(shè)置為‘./’保持相對路徑。

圖片以及一些靜態(tài)資源盡量放入src/assets目錄內(nèi)，不要放入static目錄內(nèi)，訪問不易出錯。以@/assets/……方式訪問。
在寫路徑時候，盡量不要使用絕對路徑，請使用@別名方式訪問資源。

?

在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 自定義方法中使用時必須使用 ~@ 方式引入：

總結(jié)

以上是生活随笔為你收集整理的vue项目，webpack中配置src路径别名及使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。