vue專案打包需要修改的路徑問題

2021-10-03 16:44:47 字數 1220 閱讀 4219

vue-cli專案打包需要修改的路徑問題

vue 打包生成配置檔案,方便外部修改公共路徑,不用每次都進行打包部署

vue打包後改變路徑的問題

命令列輸入:npm run build

打包出來後專案中就會多了乙個資料夾dist,這就是我們打包過後的專案。

第乙個問題,檔案引用路徑。我們直接執行打包後的資料夾中的index.html檔案,會看到網頁一片空白,f12除錯,全是css,js路徑引用錯誤的問題。

解決:到config資料夾中開啟index.js檔案。

檔案裡面有兩個assetspublicpath屬性,更改第乙個,也就是更改build裡面的assetspublicpath屬性:

assetspublicpath屬性作用是指定編譯發布的根目錄,『/』指的是專案的根目錄 ,』./』指的是當前目錄。

改好之後重新打包專案,執行index.html檔案,我們可以看到沒有報錯了。但是router-view裡面的內容卻出不來了。

第二個問題:router-view中的內容顯示不出來。路由history模式。

這個坑是當你使用了路由之後,在沒有後端配合的情況下就手賤開啟路由history模式的時候,打包出來的檔案也會是一片空白的情況,

很多人踩這個坑的時候花了很多時間,網上的教程基本上都是說的第乙個坑,這個坑很少有人提起。

解決:// mode: 『history』,//將這個模式關閉就好

這裡並不是說不能開啟這個模式,這個模式需要後端設定的配合,詳情可以看:路由文件

第三個問題 就是背景引用資源錯誤

此時通過img標籤引入的顯示正常,是因為img為html標籤,他的路徑是由index.html開始訪問的,他走static/img/'名』是能正確訪問到的

具體辦法是:

開啟build/utils.js,在圖中相應位置加入紅框內容,其中值可能會有不同,若不同,自己配置成相應的即可。

vue cli專案打包需要修改的路徑問題

1.命令列輸入 npm run build 打包出來後專案中就會多了乙個資料夾dist,這就是我們打包過後的專案。第乙個問題,檔案引用路徑。我們直接執行打包後的資料夾中的index.html檔案,會看到網頁一片空白,f12除錯,全是css,js路徑引用錯誤的問題。解決 到config資料夾中開啟in...

vue修改打包後靜態資源路徑

使用vue cli生成的專案,打包方式是直接執行package.json裡配置的指令碼 npm run build 這步其實是去執行build下的build.js指令碼檔案 node build build.js 複製 如果發布到伺服器資源,該靜態資源的路徑都是預設在根路徑下,大多數情況下是不符合期...

vue 使用elementUI遇到的打包問題

在專案開發過程中,很多時候專案會用到ui框架,以後的幾篇文章中,簡單來說說在用elementui在專案中遇到的問題 建立乙個vue的新專案時,運用到elementui框架,專案打包後就會發現,訪問index.html檔案報錯了 這時我們改下config資料夾下的index.js檔案,assetspu...