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

使用方法
使用別名一般就三種情況：在js中用，在css中用，在html文檔內用
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">

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

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

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

?

在js文件或者vue文件的script標簽中使用：

（1）、js文件中導入示例：

（2）、vue文件中導入示例：

css（scss）文件在scss或者vue的style標簽中導入示例：

（1）、在scss文件中導入示例：

（2）、在vue的style標簽中導入示例：

注意：css或者scss樣式導入需要使用?~@?開頭。

在vue的template模板標簽中引入圖片路徑示例（兩種方式均可使用）：

（1）、使用?~@?方式引入：

（2）、使用?@?方式引入：

（3）、在scss 自定義方法中使用時必須使用 ~@ 方式引入：

總結

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

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