Vue/cli@3 packaged into multiple pages

The default vue scaffolding is packaged into one html file. To package into multiple html files.
It is also very simple. You
only need to add the pages node in vue.config.js.

My code below packages a
main.js into two files. They are the back-
end interface Manage.html and the mobile interface Mobile.html.
Of course, you can change the configuration to package them into different files.

 
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']
        } 
    }, 
}

Insert picture description here
Insert picture description here
When visiting, it is
http://localhost:8080/Mobile.html.
Or
http://localhost:8080/Manage.html

Regarding simplicity and efficiency, I prefer simplicity. If this matter is too cumbersome, then choose to adopt an efficient method. For the configuration of 1-2 sentences, write a complex function. If it is changed, it will kill me. It is suggested that it is better to write it manually... Simple is the most beautiful.

Guess you like

Origin blog.csdn.net/phker/article/details/112120749