最近在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 ' 改這個配置即可，如圖：

?

轉載于:https://www.cnblogs.com/xtjatswc/p/10306567.html

總結

以上是生活随笔為你收集整理的Vue通过build打包后 打开index.html页面是空白的的全部內容，希望文章能夠幫你解決所遇到的問題。

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