无法在通过 Vercel 重写提供的应用程序中加载资产

Question

问题

资产未加载 (HTTP 404) 正在重写的应用程序。

解释

你好。 我正在使用 turborepo 创建一个网站。 我有两个不同的应用程序（ RootApp和一个SideProject ）。 他们都被部署到 Vercel。 我已将RootApp配置为在自定义域上提供服务。 我一直在关注这篇试图配置重写的博文。

RootApp是一个 Astro 项目，它有一个vercel.json来源：

// vercel.json

{
  "rewrites": [
    {
      "source": "/projects/<SideProjectName>",
      "destination": "<SideProjectProdUrl>"
    }
  ]
}

SideProject是一个 Vite/React 应用程序。 我已将其配置为具有这样的basePath

// vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  base: '/projects/<SideProjectName>/',
  plugins: [react()],
})

RootApp良好，但当我导航到<custom-domain>/projects/<SideProjectName> ，只有 HTML 请求有效。 CSS和JS的资产请求都以404失败。 他们请求<custom-domain>/projects/<SideProjectName>/assets/...

我需要配置什么才能使资产正常工作？

Answer 1

要解决此问题，我必须为资产添加重定向。

// vercel.json

{
  "redirects": [
    {
      "source": "/projects/<SideProjectName>/assets/:filePath",
      "destination": "<SideProjectProdUrl>/assets/:filePath",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/projects/<SideProjectName>",
      "destination": "<SideProjectProdUrl>"
    }
  ]
}