通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源请求，加快访问速度。
比如将登录页单独做配置，通过/login/进行访问，不需要初始资源的加载支持。
修改vite.config.js
vite.config.js 变更
最主要的就是root配置变更，更改为src目录，此处可进行多模块管理，比如项目中的 login
<b> __dirname 是vite.config.js所在的目录。<b>
如果不变更 root 配置，继续以项目根目录进行多页配置，无法跳转到其他页面
root 根目录变更后，需要注意的点
publicDir配置，原来是项目目录下的public，root 变更后，则需要重新指定，resolve(__dirname,'./public')alias通常会配置目录别名，以前./src指向 src 目录，现在 root 变更，需要手动指定resolve(__dirname,'./src'),不然原有资源加载不到outDir配置编译存放的目录，默认dist, 变更了 root，不指定就会存放在src/dist下。-
input为 rollupOptions rollup 配置，定义入口、出口及其他参数。build: { // ... // 指定输出目录 outDir: resolve(__dirname,'dist'), // rollup 配置打包项 rollupOptions: { // ... // input:"src/index.js" input: { main: resolve(__dirname, 'src/index.html'), login: resolve(__dirname, 'src/login/index.html') } },
- 访问 public 资源目录地址变更，以前是
/public/img/**，现在直接指向二级目录地址/img/**
此处展示调整过的配置，其他配置不在赘述，可查看项目地址
// ...
// config
export default defineConfig(({ command, mode }) => {
/**
* command - 命令模式
* mode - 生产、开发模式
*/
return {
const { resolve } = require('path')
// 项目根目录，index.html 所在的目录
// 要配置多页面，所以此处更改项目根目录地址，不再是项目根目录
// 而是指定的目录下， 以便配置多页面index.html入口
root: resolve(__dirname,'src'),
// 静态资源服务目录地址
// 根目录变化，原来的public静态资源目录则需要，指向
publicDir: resolve(__dirname,'./public'),
// 存储缓存文件的目录地址
cacheDir: '',
//
resolve: {
// 设置文件目录别名
// 根目录地址变更，也需要调整
alias: {
'@': resolve(__dirname,'./src'),
},
},
// ...
// 构建配置项
build: {
// ...
// 指定输出目录
outDir: resolve(__dirname,'dist'),
// 指定静态资源存放目录
assetsDir: '',
// 启用、禁用css代码拆分
cssCodeSplit: true,
// 构建是否生成source map文件
sourcemap: 'inline',
// rollup 配置打包项
rollupOptions: {
// ...
// input:"src/index.js"
input: {
main: resolve(__dirname, 'src/index.html'),
login: resolve(__dirname, 'src/login/index.html')
}
},
// 构建目录自动清除
emptyOutDir: false,
},
}
})
不变更root
如果可以不变更 root，那我们需要更改的配置也比较少，只需要调整input就可以了
build: {
// rollup 配置打包项
rollupOptions: {
// ...
// input:"src/index.js"
input: {
main: resolve(__dirname, 'src/index.html'),
login: resolve(__dirname, 'src/login/index.html')
}
},
},
但是测试多次，都无法跳转到配置的登录页。
遂作罢！！！
访问登录页地址http://127.0.0.1:8081/login/
登录成功后 http://127.0.0.1:8081 就可以正常范文项目了
vite+vue3 模板代码仓库(vite-vue3)[https://gitee.com/ngd_b/vue3-vite]
其他文章：
