vue項(xiàng)目打包后打開頁(yè)面空白解決辦法
網(wǎng)上很多說(shuō)自己的VUE項(xiàng)目通過(guò)Webpack打包生成的list文件，放到HBulider打包后，通過(guò)手機(jī)打開一片空白。這個(gè)主要原因是路徑的問題。
1、記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過(guò)script標(biāo)簽引入的，而你的路徑不對(duì)，打開肯定是空白的。先看一下默認(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模式的話，打開也會(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)文章
vue與iframe頁(yè)面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁(yè)面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由
這篇文章主要介紹了vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)
這篇文章主要介紹了Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)購(gòu)物車小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
vue本地構(gòu)建熱更新卡頓的問題“75?advanced?module?optimization”完美解決方案
這篇文章主要介紹了vue本地構(gòu)建熱更新卡頓的問題“75?advanced?module?optimization”解決方案,每次熱更新都會(huì)卡在?"75?advanced?module?optimization"?的地方不動(dòng)了，如何解決這個(gè)問題呢，下面小編給大家?guī)?lái)了解決方案，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何使用mixins優(yōu)化組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue父組件觸發(fā)子組件中的實(shí)現(xiàn)方法
文章總結(jié)：介紹了兩種實(shí)現(xiàn)父組件觸發(fā)子組件方法的常用方法：通過(guò)ref訪問子組件實(shí)例并調(diào)用方法,以及使用自定義事件觸發(fā)子組件方法2025-01-01
vue嵌套路由與404重定向?qū)崿F(xiàn)方法分析
這篇文章主要介紹了vue嵌套路由與404重定向?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js嵌套路由與404重定向的概念、原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
vue框架下部署上線后刷新報(bào)404問題的解決方案(推薦)
這篇文章主要介紹了vue框架下部署上線后刷新報(bào)404問題解決方案,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04