话不多说直接上代码 新建一个html文件
将你需要拆分出来的入口独立出来
里面的文件都建议独立配置(以便后期维护方便)
划重点!! vue.config.js文件中添加配置文件
before: function(app) {
const base = baseUrl.replace(/\/+$/, '') // 移除尾部斜杠
app.get(`${base}/:page/*`, function(req, res, next) {
if (['chatGPT', 'index'].includes(req.params.page)) {
// 把 /<base>/<page>/* 重定向到 /<base>/<page>/
req.url = `${base}/${req.params.page}/`
next('route')
} else {
next()
}
})
}
pages: {
chatGPT: {
entry: 'src/chatGPT/chatGPT.main.js',
template: 'public/index_chatGPT.html',
filename: 'index_chatGPT.html'
},
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
}
}
config.plugin('preload-index').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
config.plugin('preload-chatGPT').tap(() => [
{
rel: 'preload',
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
打包成功后会有两个html文件,个域名分别指向这两个html就ok了
打完收工