前言：由于已经提前写好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里面设置
1. entry:{ 2. web:'./src/main.js', //pc端的入口文件 3. h5:'./src/h5main.js' //h5端的入口文件 4. },
第三步：到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端进而展示对应的路由页面
