1、项目结构:
2、修改vite.config.ts文件:
完整的vite.config.ts文件:
import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path';//import{createHtmlPlugin}from'vite-plugin-html'exportdefaultdefineConfig(({command,mode})=>{/***command-命令模式*mode-生产、开发模式*/return{//项目根目录,index.html所在的目录//要配置多页面,所以此处更改项目根目录地址,不再是项目根目录//而是指定的目录下,以便配置多页面index.html入口root:resolve(__dirname,'src'),//静态资源服务目录地址//根目录变化,原来的public静态资源目录则需要,指向publicDir:resolve(__dirname,'./public'),//存储缓存文件的目录地址cacheDir:'',//resolve:{//设置文件目录别名//根目录地址变更,也需要调整alias:{'@':resolve(__dirname,'./src'),},},//...//构建配置项build:{//...//指定输出目录outDir:resolve(__dirname,'apply'),//指定静态资源存放目录assetsDir:'',//启用、禁用css代码拆分cssCodeSplit:true,//构建是否生成sourcemap文件sourcemap:'inline',//rollup配置打包项rollupOptions:{//多页面入口配置input:{apply:resolve(__dirname,'src/pages/index/index.html'),chain:resolve(__dirname,'src/pages/chain/index.html')}},//构建目录自动清除emptyOutDir:false,},plugins:[vue()]}})3、运行地址:
http://127.0.0.1:5173/pages/index/index.html
http://127.0.0.1:5173/pages/chain/index.html