我的 Vite + React 项目在部署到 Firebase 时遇到问题。我收到的控制台错误是：
无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“text/html”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
项目结构：
/project-root
/public
index.html
vite.svg
/src
/components
main.jsx
App.jsx
/dist (generated after build)
index.html
assets/
/utils
/build (after this hosting)
index.html
firebase.js
firebase.json
index.html
vite.config.js
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
index.html（构建）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" type="./images/png" href="/logo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SAYTTC 2024</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/main.jsx"></script>
</body>
</html>
firebase.json
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
npm run builddistfirebase deploy部署后，访问该站点会导致上述控制台错误，并且不显示任何内容。看来服务器正在提供 HTML 文件而不是预期的 JavaScript 模块。
错误的根源是浏览器仍然使用旧的index.html，它使用旧的index-.js文件 - 在新部署后不再存在。
请参阅我的答案以获取可能的解决方案：https://stackoverflow.com/a/78758140/1243547