這篇文章主要介紹了vue項(xiàng)目打包后打開(kāi)空白解決辦法，內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

網(wǎng)上很多說(shuō)自己的VUE項(xiàng)目通過(guò)Webpack打包生成的list文件，放到HBulider打包后，通過(guò)手機(jī)打開(kāi)一片空白。這個(gè)主要原因是路徑的問(wèn)題。

1、記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過(guò)script標(biāo)簽引入的，而你的路徑不對(duì)，打開(kāi)肯定是空白的。先看一下默認(rèn)的路徑。

module.exports = {

build: {

env: require('./prod.env'),

index: path.resolve(__dirname, '../dist/index.html'),

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: '/',

productionSourceMap: true,

assetsPublicPath默認(rèn)的是 ‘/' 也就是根目錄。而我們的index.html和static在同一級(jí)目錄下面。 所以要改為 ‘./ '

2、另外還需要注意一點(diǎn)。src里邊router/index.js路由配置里邊默認(rèn)模式是hash，如果你改成了history模式的話，打開(kāi)也會(huì)是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行 。如果非要使用history模式的話，需要你在服務(wù)端加一個(gè)覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回一個(gè)index.html,這個(gè)頁(yè)面就是你app依賴頁(yè)面。

// mode: 'history' // 默認(rèn)hash

如果不會(huì)打包vue項(xiàng)目，請(qǐng)看我寫的另外一篇詳細(xì)教程：Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的php项目index页面空白,如何解决vue项目打包后打开页面空白的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。