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

发布于 2022-09-06 05:24:57 字数 3758 浏览 20 评论 0

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