VueCli 4.x npm run build后主頁空白的原因及解決方案


1.如圖,在app.vue中添加了一個按鈕控件

 

2.執行 npm run build之后生成dist文件夾

 

3.運行后發現主頁一片空白,什么都沒有

 

4.打開開發者工具進行抓包,發現三個文件變紅,證明文件找不到

 

5.打開變紅的文件鏈接,確實提示文件不存在,因為實際文件應該在項目根目錄下的dist文件夾下。然而他默認在根目錄下尋找文件,所以找不到

 

文件不存在:

 

加上dist路徑,發現能找到文件

 

6.在項目根目錄下新建vue.config.js文件,並寫入代碼,然后重新執行npm run build 文件就能找到了

module.exports = {
  publicPath: '/dist/'
}

 

7.更好的解決方案是把/dist/換成"./",意味着打包時候在相對路徑下尋找文件,效果是一樣的。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM