vue如何实现web端与h5端整合在一起

前言：由于已经提前写好web端的系统，h5端与web端展示的内容不一样，所以需要在一套系统里写两版代码，这就需要我们使用webpack打包工具来实现。

步骤：

第一步：在src文件夹下面再新建一个h5main.js(自由命名)，然后再终端输入 

vue inspect > output.js

 如果报错-----无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 "get-help about_signing"。就到该文件夹下面将vue.ps1文件删除掉。

第二步：在生成的output.js里面设置

entry:{
    web:'./src/main.js', //pc端的入口文件
    h5:'./src/h5main.js' //h5端的入口文件
 },

第三步：到config.js里面设置pages

 // pages 里面存放多页面的配置，为对象形式，key为多页面的入口名称
      pages: {
        web: {
            // 入口文件
            entry: './src/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            title: 'PC',
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'web']
        },
        h5: {
            // 入口文件
            entry: './src/h5main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'h5.html',
            title: 'H5',
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'h5']
        }
    },

 

 第四步：在router文件夹里设置h5端的路由和web端的路由，切记在h5main.js和main.js引入对应的路由，我这里h5main.js引入的是h5端的路由

import router from './router/h5index'

然后找到public文件夹下的index.html设置

<script>
  ! function() {
    console.log("🚀 ~ file: index.html:29 ~ isMobileUserAgent:", isMobileUserAgent())
      if (isMobileUserAgent()) {   
          if (!/h5.html/.test(location.href)) { //移动端时，我们跳转到h5的html
              window.location.href = window.location.origin + '/h5.html'
          }
      }else{
          if (/h5.html/.test(location.href)) { //移动端时，我们跳转到h5的html
              window.location.href = window.location.origin
          }
      }

      function isMobileUserAgent() { // 判断是pc端还是h5端
          return /iphone|ipod|android|windows.*phone|blackberry.*mobile/i.test(
              window.navigator.userAgent.toLowerCase()
          );
      }
  }()
</script>

这样打包后项目会自动判断当前页面是pc端还是h5端进而展示对应的路由页面