如何配置Vite React项目以支持直接本地打开构建后的HTML文件？

云上老周

2026-8-1

解决方案：Vite构建React项目后直接打开HTML出现CORS错误

问题原因

直接通过file://协议打开本地HTML文件时，浏览器的同源策略会阻止资源加载——因为file协议不属于HTTP环境，即使设置了base: './'，依然会触发CORS限制。

可行解决方案

方案1：用本地轻量HTTP服务器打开（推荐）

这是最稳妥的方式，完全规避CORS问题：

Python内置服务器：进入dist文件夹后执行对应命令：
- Python 3：python -m http.server 8080
- Python 2：python -m SimpleHTTPServer 8080
Node.js的http-server：先全局安装包：npm install -g http-server，再进入dist文件夹执行：http-server -p 8080
之后在浏览器访问http://localhost:8080即可正常加载页面。

方案2：优化Vite配置适配本地文件协议

调整构建配置，确保所有资源引用完全使用相对路径：
修改你的vite.config.js如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()],
    base: "./",
    build: {
        assetsDir: "assets",
        rollupOptions: {
            output: {
                // 统一资源输出路径为相对的assets文件夹
                entryFileNames: "assets/[name]-[hash].js",
                chunkFileNames: "assets/[name]-[hash].js",
                assetFileNames: "assets/[name]-[hash].[ext]",
            },
        },
    },
});

然后重新执行构建：npm run build

方案3：临时绕过浏览器CORS限制（仅测试用）

不推荐用于生产，仅适合临时本地测试：

关闭所有Chrome窗口，在终端执行启动命令（Windows示例）：
```
chrome.exe --disable-web-security --user-data-dir="C://ChromeDevSession"
```
打开Chrome后，直接拖入dist里的index.html即可加载。