如何用Vite构建无需Web服务器、双击index.html即可运行的React应用？

首先明确：Vite 不支持 Create React App 里的 homepage 字段，所以你在 package.json 里加 "homepage": "." 完全没用，得用 Vite 专属的配置逻辑来解决。

分两种场景处理： #

场景1：静态资源（图片、字体等）加载出现CORS

• 第一步：修改 Vite 配置文件（vite.config.js/vite.config.ts），设置 base 为相对路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: './' // 对应CRA的"homepage": "."
  })
  

• 第二步：检查所有静态资源的引用方式，确保用相对路径而非绝对路径。比如：
  • 正确：./assets/logo.png
  • 错误：/assets/logo.png（绝对路径会导致部署后资源路径错误，触发CORS）
• 第三步：重新构建项目（npm run build），查看 dist 文件夹里的 index.html，确认资源路径都是以 ./ 开头的相对路径。

场景2：API 请求出现CORS

这和前端路径配置无关，是后端没配置跨域允许。你可以用 Vite 的开发服务器代理来绕过浏览器的CORS限制：

• 在 vite.config.js 里添加 server.proxy 配置：

  export default defineConfig({
    plugins: [react()],
    server: {
      proxy: {
        // 假设你的API前缀是/api
        '/api': {
          target: 'https://你的后端域名', // 替换成实际后端地址
          changeOrigin: true, // 必须开启，否则后端会识别不到正确的请求来源
          rewrite: (path) => path.replace(/^\/api/, '') // 如果后端没有/api前缀，就去掉这部分
        }
      }
    }
  })
  

• 前端请求时，直接用 /api/xxx 代替完整的后端地址，Vite 会自动把请求转发到后端，避免CORS错误。

如果还是有问题，先确认错误信息里的请求地址是啥：如果是静态资源地址不对，回到场景1排查；如果是API地址，检查代理配置是否正确，或者后端是否真的开启了跨域支持。

内容的提问来源于stack exchange，提问作者Asen Tolsuzov