vue pc端跟移动端加载不同的入口文件

1.改下main.js文件

// 判断是否是手机端打开的网页-动态加载main文件
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
	  console.log('移动端',navigator.userAgent);
		Promise.all([import('./mainMobile.js')]).then(() => {})
	} else {
	  console.log('pc端',navigator.userAgent);
		Promise.all([import('./mainPc.js')]).then(() => {})
	}

2.新建mainPc.js， mainMobile.js

mainPc.js

mport Vue from 'vue'
import App from './App'
// PC端需要的库
...

let vm = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

mainMobile.js

mport Vue from 'vue'
// 如果导入AppMain,就新建AppMain.vue
import App from './AppMain'
// 移动端需要的库
...

let vm = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

3. 新建AppMain.vue 区分移动端的入口app，也可以不建，跟PC端共用App.vue

AppMain.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
      }
    },
    mounted(){
      console.log('移动端APP')
    },
    methods:{

    }
  }
</script>
<style scoped>
html, body, #app{
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}
</style>