如何将带有公共文件夹的 React vite 应用程序部署到我域中的子文件夹？

Question

我正在尝试将一个带有 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"
});

我将其部署为静态站点，所以我基本上是将

dist

文件夹从运行

vite build

复制到我的数字海洋水滴。

当我导航到 https://example.com/my-app 时，我能够收到初始的 javascript 和 css 文件。但是，当 javascript 运行时，我在

public

文件夹中的文件上收到 404 错误。

GET

请求表示不再在子文件夹中查找，而是直接在根域中查找资产

所以，

GET

javascript 请求看起来像这样：

https://example.com/my-app/assets/index-95119c9d.js

GET

基于为静态资产提供的 javascript 的请求 (

my-asset

) 看起来像这样：

https://example.com/my-asset

我如何在我的

vite.config.ts

中指出对

public

文件夹资产的引用应该also在我的配置文件中指定为

base

的子文件夹中搜索。

Answer 1

我最终需要在我从“公共”文件夹加载的所有文件前加上子文件夹名称（例如，上例中的

/my-app/my-asset

）。结合上述

vite.config.ts

进行此操作，尽管我觉得这是一个脆弱的解决方案。