最近公司對接zoom websdk，因為一些特殊原因，需要將zoom相關(guān)的頁面獨立成單獨的html頁面，這里因為瀏覽器版本升級引起的問題。所以這里針對vue項目多頁面打包整理下，方便自己方便有需要的童鞋。
這里分別講一下vue2+webpack3 和 vue-cli3不同的配置。

vue2 + webpack3

這種老項目我們都是自己配置webpack，目錄基本如上
先講改動

webpack.base.conf.js

entry: {
    app: './src/main.js',
    meeting: './src/entry/meeting/main.js'
},

這里需要配置一下entry,我是獨立了一個文件夾出來放需要單獨出來的目錄，mainjs里面就可以單獨給你的頁面做一些定制化配置，比如router、路由攔截器、axios等，相當于另外一個項目，這個就自由發(fā)揮了

image.png

類似這樣，我這次單獨配置了router和路由攔截，記得修改main.js的引入路徑

webpack.dev.conf.js + webpack.prod.conf.js

這兩個文件只需要增加html插件處理即可，我這里兩個配置不太一樣

• webpack.dev.conf.js

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      chunks: ['app'],
      inject: true
}),
new HtmlWebpackPlugin({
      filename: 'meeting.html',
      template: 'meeting.html',
      chunks: ['meeting'],
      inject: true
}),

• webpack.prod.conf.js

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
      filename: config.build.meeting,
      template: 'index.html',
      inject: true,
      chunks: ['manifest', 'vendor', 'meeting']
}),

對應的config中配置了兩個地址

index: path.resolve(__dirname, '../dist/index.html'),
meeting: path.resolve(__dirname, '../dist/meeting.html'),

按以上配置完即可，可以測試，這里有幾個地方是可以優(yōu)化的

• enter可以封裝成方法，從某個文件夾自動引入
• 根據(jù)entry生成HtmlWebpackPlugin這個插件的處理

這樣以后只用維護entry引入的目錄即可，不需要每次添加頁面都再更改，以后有時間將這一塊優(yōu)化一下。

vue-cli3

現(xiàn)在使用vue2的話基本都是vue-cli3系列，webpack配置集成化，更加簡單，只用修改幾個地方即可

vue.config.js

pages: {
    index: {
        entry: `./src/main.js`,
        template: 'public/index.html',
        filename: 'index.html',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    meeting: {
        entry: `./src/entry/meeting/main.js`,
        template: 'public/meeting.html',
        filename: 'meeting.html',
        chunks: ['chunk-vendors', 'chunk-common', 'meeting']
    }
},

只需要配置這一塊即可，其他可能會有零星的小問題，根據(jù)報錯修改就好，調(diào)試過程中還碰到一些問題，但都是因為項目配置引起的，之前框架是其他人直接拉的開源項目改的，所以有一些稀里古怪的配置影響。