最近在build打包vue項目遇到了幾個問題,如下:
1、npm run build打包項目之后,我們通常是把dist文件里面被壓縮后的static文件跟index.html提交到服務器,但最近發現直接打開index.html頁面是空白的,還會報幾個錯,找不到頁面路徑。
原因:找到config文件下index.js,全局搜索assetsPublicPath,結果是 assetsPublicPath:' / ' 默認為根目錄,而index.html和static是在同一級目錄下,因此,解決方法就是 assetsPublicPath:' ./ ' 斜杠前加一個點,表示同一級。如圖:
如果還搞不懂assetsPublicPath,看下面解釋:
assetsPublicPath
這個靜態資源的引用前綴, 默認的是/
按照上面的配置,
當你把 dist 文件夾下的文件放到服務器,
- 能用
http://www.xxx.com/static/js/xxx.js
路徑訪問到時, 那么assetsPublicPath
就不需要修改了 - 需要用
http://www.xxx.com/aaa/bbb/static/js/xxx.js
路徑訪問到時, 那么assetsPublicPath
就得改成/aaa/bbb/
, 然后重新 build 一次, 上傳到服務器 - 當你把靜態文件傳到 cdn, 需要用
http://stacic.yyy.com/aaa/bbb/static/js/xxx.js
路徑訪問到時, 那么assetsPublicPath
就得改成http://stacic.yyy.com/aaa/bbb/
, 然后重新 build 一次, 上傳到服務器
用絕對路徑
聽起來好像很復雜啊, 能不能用相對路徑
呢?
當然也是可以的, 不過配置起來要比用絕對路徑復雜的多, 主要是涉及到 css 文件的里圖片和字體等
- 首先,
assetsSubDirectory
要設置成空 - 將
assetsPublicPath
, 改成./
2、頁面可以正常打開了,但是vue-router跳轉路由頁面無法顯示,其實,這個也很簡單。
解決方法:打開index.js看路由配置,mode:' hash ' 改這個配置即可,如圖: