webpack+vue用huilder打包和真机调试显示空白页。已解决

Question

忘了用npm run build 这一步生成dist
如题，用浏览器调试和手机连接电脑ip调试是正常的，用huilder不可以

在网上搜了一下，按照教程改了还是不行 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和目录

Answer 1

打开F12看控制台，资源路径错误，修改webpack打包构建路径配置

Answer 2

只有一个唯一的答案,就是你打包后的文件,资源的url根本就是不正确,不信你打包出来的时候,直接访问试试.
人家Hublide可不背这个锅.在怎么打包也负责不了你的代码编码

调试看看webpack的资源url设置 单凭两张截图没法解决

Answer 3

如果不是路径问题的话 就在main.js里面的 最后一行 加一句 router.replace('/index'); 只要每次app重启打开时 默认进index页面

Answer 4

为啥要用hbuilder来打包呢？是用它的打包APP功能吗？打包成web项目会空白或者报错吗？如果会，那就是项目的问题，如果不会，要么是你hbuilder的用法不对，要么就是真的hbuilder本身有问题

Answer 5

为啥，链接过来有个“http://8.www.segmentfault.com...”，有个8.什么意思？