第一步 運用腳手架創(chuàng)建vue項目

創(chuàng)建完項目之后 分別創(chuàng)建PC和H5對應(yīng)的路由、圖片文件夾、模塊文件夾和頁面所在文件夾
如圖所示

微信截圖_20200518202007.png

上面的output.js 和 vue.config.js 需要手動創(chuàng)建

創(chuàng)建 output.js 方式

vue inspect > output.js

注意 創(chuàng)建output.js時必須創(chuàng)建出PC和H5所對應(yīng)的文件

創(chuàng)建 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里面加上下面這段代碼 根據(jù)PC和H5進行加載對應(yīng)頁面

<script>
        ! function() {
            if (isMobileUserAgent()) {
                if (!/h5.html/.test(location.href)) { //移動端時，我們跳轉(zhuǎn)到h5的html
                    window.location.href = window.location.origin + '/h5.html'
                }
            }else{
                if (/h5.html/.test(location.href)) { //移動端時，我們跳轉(zhuǎn)到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>