最近公司對(duì)接zoom websdk，因?yàn)橐恍┨厥庠颍枰獙oom相關(guān)的頁面獨(dú)立成單獨(dú)的html頁面，這里因?yàn)闉g覽器版本升級(jí)引起的問題。所以這里針對(duì)vue項(xiàng)目多頁面打包整理下，方便自己方便有需要的童鞋。
這里分別講一下vue2+webpack3 和 vue-cli3不同的配置。

vue2 + webpack3

這種老項(xiàng)目我們都是自己配置webpack，目錄基本如上
先講改動(dòng)

webpack.base.conf.js

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

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

image.png

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

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

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

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

對(duì)應(yīng)的config中配置了兩個(gè)地址

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

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

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

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

vue-cli3

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

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

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