欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

hbuilder 打包vue白屏

錢斌斌1年前9瀏覽0評論

如果你使用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社區中尋找幫助。