vue項目webpack中配置src路徑別名及使用方式

更新時間：2024年03月01日 14:31:52 作者：yusirxiaer

這篇文章主要介紹了vue項目webpack中配置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，在很多問題中就是因為路徑出現(xiàn)問題。

共享一個碰到的坑：

在config/index.js內可以設置打包后根目錄，例如：

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

圖片以及一些靜態(tài)資源盡量放入src/assets目錄內，不要放入static目錄內，訪問不易出錯。以@/assets/……方式訪問。

在寫路徑時候，盡量不要使用絕對路徑，請使用@別名方式訪問資源。