複数のページにパッケージ化されたVue / cli @ 3

デフォルトのvueスキャフォールディングは1つのhtmlファイルにパッケージ化されています。複数のhtmlファイルにパッケージ化する
には。これも非常に簡単です
。vue.config.jsにページノードを追加するだけで済みます。

以下のコードは、
main.jsを2つのファイルにパッケージ化しました。これらは、バックグラウンドインターフェイスの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文の構成では、複雑な関数を記述します。変更すると、私を殺してしまいます。手動で書く方がいいと…シンプルが一番美しいです。