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...