vue項(xiàng)目打包后打開頁面空白解決辦法
網(wǎng)上很多說自己的VUE項(xiàng)目通過Webpack打包生成的list文件，放到HBulider打包后，通過手機(jī)打開一片空白。這個主要原因是路徑的問題。
1、記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過script標(biāo)簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認(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在同一級目錄下面。 所以要改為 ‘./ '
2、另外還需要注意一點(diǎn)。src里邊router/index.js路由配置里邊默認(rèn)模式是hash，如果你改成了history模式的話，打開也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行 。如果非要使用history模式的話，需要你在服務(wù)端加一個覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回一個index.html,這個頁面就是你app依賴頁面。
// mode: 'history' // 默認(rèn)hash
如果不會打包vue項(xiàng)目，請看我寫的另外一篇詳細(xì)教程：Vue webapp項(xiàng)目通過HBulider打包原生APP
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue與iframe頁面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue3實(shí)現(xiàn)動態(tài)添加路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue如何調(diào)用接口請求頭增加參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)購物車小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue本地構(gòu)建熱更新卡頓的問題“75?advanced?module?optimization”完美解決方案
這篇文章主要介紹了vue本地構(gòu)建熱更新卡頓的問題“75?advanced?module?optimization”解決方案,每次熱更新都會卡在?"75?advanced?module?optimization"?的地方不動了，如何解決這個問題呢，下面小編給大家?guī)砹私鉀Q方案，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何使用mixins優(yōu)化組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue父組件觸發(fā)子組件中的實(shí)現(xiàn)方法
文章總結(jié)：介紹了兩種實(shí)現(xiàn)父組件觸發(fā)子組件方法的常用方法：通過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問題解決方案,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04