当前位置:

vite配置多页面入口

访客 2024-04-24 215 0

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

  • 发表评论

    • 评论列表
    还没有人评论,快来抢沙发吧~