通常开发中一般都是vue开发的SPA的单页面应用,也是在这次公司一个低代码平台的开发中了解到了-vue多页面应用。
记录一下多入口的配置
找到vue.config.js文件,在module.exports的域里,找到entry,在那里配置添加多个入口:
module.exports = {
publicPath: '/',
devServer: {
proxy: {
'/dev': {
target: '',
changeOrigin: true,
pathRewrite: {
'^/dev': ''
}
}
}
},
configureWebpack: config => {
config.devtool = 'source-map'
},
css: {
// css预设器配置项
loaderOptions: {
sass: {
// sass-loader如果是V8+的版本,废除了data这个配置项,改为了prependData
// data: `@import "@/styles/setting-variable.scss";`
prependData: '@import "@/styles/index.scss";'
}
}
},
pages: {
workbench: {
entry: 'src/modules/workbench/main.js',
template: 'public/index.html',
filename: 'multi-page/workbench.html',
title: 'workbench',
chunks: ['chunk-vendors', 'chunk-common', 'workbench']
},
'home-page': {
entry: 'src/modules/home-page/main.js',
template: 'public/index.html',
filename: 'multi-page/home/home-page.html',
title: 'home-page',
chunks: ['chunk-vendors', 'chunk-common', 'home-page']
},
'call-log': {
entry: 'src/modules/call-log/main.js',
template: 'public/index.html',
filename: 'multi-page/home/call-log.html',
title: 'call-log',
chunks: ['chunk-vendors', 'chunk-common', 'call-log']
},
'seats-manage': {
entry: 'src/modules/seats-manage/main.js',
template: 'public/index.html',
filename: 'multi-page/home/seats-manage.html',
title: 'seats-manage',
chunks: ['chunk-vendors', 'chunk-common', 'seats-manage']
},
settings: {
entry: 'src/modules/settings/main.js',
template: 'public/index.html',
filename: 'multi-page/home/settings.html',
title: 'settings',
chunks: ['chunk-vendors', 'chunk-common', 'settings']
},
},
}
这里共配置了5个入口,对应了5个模块