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

忘了用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和目录
图片描述

阅读 4.1k
评论
    5 个回答

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

      • 443

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

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

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

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

              撰写回答

              登录后参与交流、获取后续更新提醒

              相似问题
              推荐文章