我正在开发一个 React-Typescript-Vite 项目，我想将其部署到 Firebase 托管。该应用程序在本地运行良好（使用 npm run dev），但我遇到了 prod 问题。我的应用程序基本上有一个商店的名称作为第一个 url 子目录，然后是主页的另一个子目录/条目。因此，例如 - http://localhost:5173/gucci/entry。有趣的是，如果我只导航到 https://myprojectname.firebaseapp.com/gucci（托管我的应用程序的 url），我会看到背景图片，但如果我尝试 https://myprojectname.firebaseapp。 com/gucci/entry 然后我得到一个空白页面。
我已经尝试使用 chrome 开发工具中的源和网络选项卡来帮助我调试，这是我在“入口”文档的源选项卡中的产品站点中看到的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<script type="module" crossorigin src="./assets/index-f625c516.js"></script>
<link rel="stylesheet" href="./assets/index-31f53eb0.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
这是我在本地环境中的同一文档中看到的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx?t=1677961443563"></script>
</body>
</html>
所以问题似乎出在产品中的脚本标签上，但我不确定如何处理它。
这是我的 firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
这是我的 vite.config
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})
我正在使用 react-router-dom 进行路由。我很感激任何人的帮助！