鍍金池/ 問答/Android  HTML/ webpack+vue用huilder打包和真機(jī)調(diào)試顯示空白頁。已解決

webpack+vue用huilder打包和真機(jī)調(diào)試顯示空白頁。已解決

忘了用npm run build 這一步生成dist
圖片描述如題,用瀏覽器調(diào)試和手機(jī)連接電腦ip調(diào)試是正常的,用huilder不可以圖片描述

圖片描述

在網(wǎng)上搜了一下,按照教程改了還是不行 vue打包顯示空白頁教程

main.js

import Vue from 'vue'
import MintUI from 'mint-ui'
import axios from 'axios'
import 'mint-ui/lib/style.css'
import App from './App'
import VueRouter from 'vue-router'
import Index from './components/index'
import MyFooter from './components/footer'
import Usercenter from './components/usercenter'
import News from './components/news'
import Myorder from './components/usercenter/myorder'
import Usermes from './components/usercenter/usermes'
import GoodsInfo from './components/goodsInfo'



let http = '47.94.241.59/bw/dianshang/'

import {
  Header
} from 'mint-ui';
import {
  Cell
} from 'mint-ui';
import {
  Button
} from 'mint-ui';
import {
  Loadmore
} from 'mint-ui'

Vue.use(VueRouter)
Vue.use(MintUI)
Vue.component(Loadmore.name, Loadmore);
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell);
Vue.component(Header.name, Header);
Vue.prototype.axios = axios
const router = new VueRouter({
  routes: [{
      path: '/',
      component: Index,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/footer',
      component: MyFooter
    },
    {
      path: '/news',
      component: News
    },
    {
      path: '/usercenter',
      component: Usercenter,
    },
    {
      path: '//usercenter/myorder',
      component: Myorder
    },
    {
      path: '//usercenter/usermes',
      component: Usermes
    },
    {
      path: '/goodsInfo',
      component: GoodsInfo
    }
  ]
})
const app = new Vue({
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
}).$mount('#app')

App.vue

<template>
  <div>
    <mt-tabbar fixed v-model="selected">
          <mt-tab-item id="tab1">
            <i></i>
             <img>
            <router-link to='/'>首頁</router-link>
          </mt-tab-item>
          <mt-tab-item id="tab2">
            <i></i>
            <img>
            <router-link to='/news'>資訊</router-link>
          </mt-tab-item>
          <mt-tab-item id="tab3">
            <i></i>
            <img>
            <router-link to='/usercenter'>我的</router-link>
          </mt-tab-item>
        </mt-tabbar>
        <keep-alive>
        <router-view></router-view>
        </keep-alive>
  </div>
</template>

<script>


export default {
    data(){
        return{
            selected:'',
            isActive:true
        }
    },
    method:{
        
    }
}
</script>

<style scoped lang="stylus">
    .mint-tabbar
        height 40px
        line-height 30px
    
    .mint-swipe
        height 150px !important
    
    .router-link-exact-active
        color #1273c4 !important
    
    .mint-tab-item-label a
        font-size 16px
        display block
    
    .mint-tabbar .is-selected
        background none !important
    
.mint-tab-item-icon
    background red !important

</style>

index.html和目錄
圖片描述

回答
編輯回答
瘋浪

為啥要用hbuilder來打包呢?是用它的打包APP功能嗎?打包成web項(xiàng)目會空白或者報(bào)錯嗎?如果會,那就是項(xiàng)目的問題,如果不會,要么是你hbuilder的用法不對,要么就是真的hbuilder本身有問題

2017年11月8日 12:18
編輯回答
風(fēng)清揚(yáng)

為啥,鏈接過來有個(gè)“http://8.www.segmentfault.com...”,有個(gè)8.什么意思?

2017年6月22日 22:33
編輯回答
影魅

只有一個(gè)唯一的答案,就是你打包后的文件,資源的url根本就是不正確,不信你打包出來的時(shí)候,直接訪問試試.
人家Hublide可不背這個(gè)鍋.在怎么打包也負(fù)責(zé)不了你的代碼編碼

調(diào)試看看webpack的資源url設(shè)置 單憑兩張截圖沒法解決

2017年11月13日 20:03
編輯回答
終相守

如果不是路徑問題的話 就在main.js里面的 最后一行 加一句 router.replace('/index'); 只要每次app重啟打開時(shí) 默認(rèn)進(jìn)index頁面

2018年2月27日 10:09
編輯回答
旖襯

打開F12看控制臺,資源路徑錯誤,修改webpack打包構(gòu)建路徑配置

2018年7月27日 14:24