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

三妹_day

于 2023-04-28 13:42:54 发布

阅读量240

点赞数

分类专栏： vue js问题文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_26841153/article/details/130424512

版权

js问题同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

文章介绍了如何根据设备类型动态加载不同的Vue主文件。在main.js中，通过检测用户代理判断设备是移动端还是PC端，然后分别导入并执行mainMobile.js或mainPc.js。这两个文件中都创建了Vue实例，并可能引入了特定设备所需的额外库。移动端可以有单独的AppMain.vue入口组件，但也可与PC端共享App.vue。

摘要由CSDN通过智能技术生成

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>