無法在通過 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>"
    }
  ]
}