如何配置Vite将带public文件夹的React应用部署到域名子目录？

问题背景 #

我将基于Vite的React应用部署到域名子目录https://example.com/my-app，当前使用的vite.config.ts配置如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  root: "./",
  build: {
    outDir: "dist",
  },
  base: "/my-app/",
  publicDir: "public"
});

部署后访问https://example.com/my-app能正常加载初始JS和CSS文件，但运行时public文件夹内的资源请求会直接指向根域名（例如https://example.com/my-asset），导致404错误。需要让这些资源请求也自动指向配置的子目录。

解决方法 #

1. 修正代码中public资源的引用方式

问题核心在于直接使用绝对路径引用public资源，未结合Vite的base配置。必须通过import.meta.env.BASE_URL拼接资源路径：

• 错误写法：

  <img src="/my-asset.png" />
  

• 正确写法：

  <img src={`${import.meta.env.BASE_URL}my-asset.png`} />
  

import.meta.env.BASE_URL会自动读取vite.config.ts中配置的base值，打包后路径会自动生成为/my-app/my-asset.png，确保请求指向子目录。

2. 确认vite.config.ts配置有效性

你当前的配置已经设置了base: "/my-app/"，这部分是正确的，额外注意：

• publicDir保持"public"即可，Vite会自动处理该目录下资源的打包路径
• build.outDir设置为dist符合默认规范，无需修改

3. 服务器配置匹配（以Nginx为例）

确保服务器将子目录请求正确映射到dist文件夹：

location /my-app {
  alias /path/to/your/dist;
  try_files $uri $uri/ /my-app/index.html;
}

这样服务器会把/my-app开头的请求转发到dist目录下的对应资源，同时支持React路由的刷新跳转。

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