如何将所有Vite入口文件统一存放至非根目录？

当前项目结构：

│   vite.config.ts
│   index.html
│
└───admin
│   │ index.html
│
└───info
    │ index.html

对应的Vite配置：

build: {
    target: "esnext",
    rollupOptions: {
        input: {
            main: resolve(__dirname, "index.html"),
            admin: resolve(__dirname, "admin/index.html"),
            info: resolve(__dirname, "info/index.html")
        }
    }
}

想要把所有入口文件统一放到entry文件夹，期望结构：

│ vite.config.ts
│
└───entry
      │   index.html
      └───info
      │   │ index.html
      └───admin
          │ index.html

修改后的Vite配置如下，但访问admin或info入口时，总是被重定向到主index.html：

build: {
    target: "esnext",
    rollupOptions: {
        input: {
            main: resolve(__dirname, "entry/index.html"),
            admin: resolve(__dirname, "entry/admin/index.html"),
            info: resolve(__dirname, "entry/info/index.html")
        }
    }
}

需要解决这个重定向问题，实现入口统一存放的需求。

解决办法 #

1. 修复开发环境的重定向问题 #

Vite开发服务器默认以项目根目录为静态资源根目录，访问/admin时，它会优先查找根目录下的admin文件夹，找不到就自动 fallback 到主入口。你可以通过配置服务器重写规则解决：

修改vite.config.ts，添加服务器配置：

import { defineConfig, resolve } from 'vite';

export default defineConfig({
  server: {
    fs: {
      strict: false, // 关闭严格模式，避免路径解析限制
    },
    // 重写路径，让访问/admin指向entry下的admin入口
    rewrite: {
      '^/admin': '/entry/admin/index.html',
      '^/info': '/entry/info/index.html',
    },
  },
  build: {
    target: "esnext",
    rollupOptions: {
      input: {
          main: resolve(__dirname, "entry/index.html"),
          admin: resolve(__dirname, "entry/admin/index.html"),
          info: resolve(__dirname, "entry/info/index.html")
      }
    }
  }
});

2. 生产构建后的部署配置 #

构建完成后，dist目录里会生成index.html、admin.html、info.html三个入口文件。部署时需要给服务器添加路由规则，确保访问对应路径能指向正确的HTML：

以Nginx为例，配置示例：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/dist;

  # 主入口路由
  location / {
    try_files $uri $uri/ /index.html;
  }

  # admin入口路由
  location /admin {
    try_files $uri $uri/ /admin.html;
  }

  # info入口路由
  location /info {
    try_files $uri $uri/ /info.html;
  }
}

3. 更友好的构建结构（可选） #

如果想让构建后的目录结构更贴合路由习惯，可以修改rollup的输出配置，让每个入口的HTML文件放在对应子目录下：

rollupOptions: {
  input: {
      main: resolve(__dirname, "entry/index.html"),
      admin: resolve(__dirname, "entry/admin/index.html"),
      info: resolve(__dirname, "entry/info/index.html")
  },
  output: {
    // 把每个入口的资源放到对应子目录的assets文件夹中
    entryFileNames: '[name]/assets/[name]-[hash].js',
    chunkFileNames: '[name]/assets/[name]-[hash].js',
    assetFileNames: '[name]/assets/[name]-[hash].[ext]',
  }
}

构建后的dist结构会变成这样：

├───dist
│   │ index.html
│   └───admin
│   │   │ index.html
│   │   └───assets
│   └───info
│       │ index.html
│       └───assets

这种结构部署时，服务器只需要配置每个子目录的fallback到自身的index.html即可，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Bassie