Vue 打包成多页

默认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/main.js', // page 的入口
            template: 'src/public/index.html', // 模板来源
            filename: 'Mobile.html', //打包输出成dist/Mobile.html
             // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'Mobile']
        },
        Manage: {
      
            entry: 'src/main.js', // page 的入口
            template: 'src/public/index.html', // 模板来源
            filename: 'Manage.html', // 打包输出成dist/Manage.html
            // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'Manage']
        } 
    }, 
}