vue项目同时跑出pc端和h5端

第一步 运用脚手架创建vue项目

创建完项目之后 分别创建PC和H5对应的路由、图片文件夹、模块文件夹和页面所在文件夹
如图所示

微信截图_20200518202007.png

上面的output.js 和 vue.config.js 需要手动创建

创建 output.js 方式

vue inspect > output.js

注意 创建output.js时必须创建出PC和H5所对应的文件

创建 vue.config.js 这个不说了

接下来修改 output.js

将output.js拉到最底部
会有一个

entry:{}

将这里面的路径进行修改 我这是修改之后是

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

接下来修改 vue.config.js

module.exports = {
      publicPath: process.env.NODE_ENV === 'production' ? '' : './',
      productionSourceMap: false,
    // pages 里面存放多页面的配置，为对象形式，key为多页面的入口名称
    pages: {
        web: {
            // 入口文件
            entry: './src/p_pro.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/m_pro.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'h5.html',
            title: 'H5',
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'h5']
        }
    }
}

最后一步

在public 里面的index.js里面加上下面这段代码 根据PC和H5进行加载对应页面

<script>
        ! function() {
            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>