Vue/cli@3 打包成多页

默认vue的脚手架是打包成一个html文件的. 要想打包成多个html文件.
也非常简单.
只需要在 vue.config.js 中增加pages 节点即可.

我下面的代码就把一个main.js打包成了两个文件.
分别是后台界面Manage.html
和移动端界面 Mobile.html
当然你改下配置就可以分别打包成不同的文件.

 
console.log("开始打包");  
module.exports = {
    // 这里是配置上线读取当前目录，默认是根路径，如 /js, /css 等，具体根据项目来
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    devServer:{
        proxy:{
            '/api/':{
                target:"http://localhost:63558/", 
                logLevel:'debug',
                changeOrigin: true, 
                secure: false 
            }
        }
    },
    pages:{
        Mobile : {
            entry: 'src/Mobile/main.js', // page 的入口
            template: 'src/Mobile/index.html', // 模板来源
            filename: 'Mobile.html', 
            chunks: ['chunk-vendors', 'chunk-common', 'Mobile']
        },
        Manage: { 
            entry: 'src/Manage/main.js', // page 的入口
            template: 'src/Manage/index.html', // 模板来源
            filename: 'Manage.html', // 在 dist/index.html 的输出
            // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'Manage']
        } 
    }, 
}

访问的时候是
http://localhost:8080/Mobile.html.
或者
http://localhost:8080/Manage.html

关于简单和高效之间我更优先倾向于简单, 如果这件事情过于繁琐, 那么再选择采用高效的方法. 为了1-2句话的配置, 写个复杂的函数, 改起来还要命的话. 我是建议还不如手动写一下… 简单才是最美的.