如果你使用hbuilder打包vue項目時遇到了白屏問題,那么你需要關注以下解決方法。其中一個導致白屏的主要原因是webpack打包后的index.html文件中,引入了一堆靜態資源,而這些靜態資源可能不存在,導致瀏覽器請求失敗,最終導致白屏。
接下來我將詳細介紹如何通過手動修改config/index.js文件和html-webpack-plugin插件的配置來解決vue項目打包后的白屏問題。
步驟一:打開config/index.js文件,找到build對象中的assetsPublicPath屬性,并將其從'/'修改為'./',如下:
build: { ... assetsPublicPath: './', // 修改為相對路徑 ... }
步驟二:找到build對象中的index屬性,注釋掉template和favicon兩個屬性,并將其改為true,如下:
build: { ... index: true, // 修改為true // template: 'index.html', // 注釋掉 // favicon: path.resolve('favicon.ico'), // 注釋掉 ... }
步驟三:找到build對象中的productionSourceMap屬性,并將其改為false,如下:
build: { ... productionSourceMap: false, // 修改為false ... }
步驟四:找到build對象中的htmlWebpackPlugin屬性,并將其完整設置如下:
build: { ... htmlWebpackPlugin: { title: '項目標題', // 自己設置 filename: 'index.html', template: path.resolve('./index.html'), inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }, ... }
其中,inject和chunksSortMode兩個屬性必須設置為true和'dependency',其他屬性可以根據需要自行設置。
最后,重新打包vue項目,白屏問題就應該得到解決了。如果你仍然遇到了其他問題,可以參考vue官方文檔,或者在vue社區中尋找幫助。
上一篇vue中隱藏label
下一篇vue中配置axios