在构建时反应空白页面

Question

我一直在学习 React（对它来说有点陌生），我正在开发一个项目，并且我做了一个 npm create vite@latest。到目前为止，当我运行 dev 时一切正常。但是，当我运行构建时，然后转到 dist 文件夹并打开 index.html 文件，我得到一个空白页面。

所以我在 FireFox 中检查页面并收到这些错误 -

跨源请求被阻止：同源策略不允许读取 file:///assets/index-J7cny882.js 处的远程资源。 （原因：CORS请求不是http）

跨源请求被阻止：同源策略不允许读取 file:///assets/index-BAXwXR6k.css 处的远程资源。 （原因：CORS请求不是http）

我对此感到有点困惑。不知道出了什么问题或如何解决。我确实在网上发现了一些提到添加“主页”：“。”到 package.json。我这样做了，但没有帮助。

我很感谢您的帮助。

谢谢。

Answer 1

1. 使用本地 HTTP 服务器提供 dist 文件夹 最简单的解决方案是使用本地 HTTP 服务器来提供您构建的文件。您可以全局安装一个并使用它：

安装一个简单的HTTP服务器：

npm install -g serve

提供您的 dist 文件夹：

serve dist

这将在 http://localhost:3000（或其提供的其他端口）上托管您的项目，您可以访问您的项目而不会遇到 CORS 问题。

2. 调整 vite.config.js 中的基础 使用 Vite 构建时，请确保资产的路径是相对的或配置正确。默认情况下，Vite 使用 / 作为基础，如果您的项目不是从根路径提供服务，这可能会导致问题。

修改 vite.config.js 文件设置相对基数：

javascript

import { defineConfig } from 'vite'

export default defineConfig({
  base: './', // Ensures relative paths for assets
})

然后重建您的项目：

npm run build

现在，生成的index.html文件中的路径将是相对的，您可以直接在浏览器中打开它，而不需要本地服务器。

3. 避免直接使用 file:/// 打开 浏览器对使用 file:/// 打开的文件实施更严格的安全策略。使用本地 HTTP 服务器（如步骤 1 所示）可以避免这些限制。