vite打包本地文件无法直接打开, file 类型 URL 引发跨域等问题探讨

解决使用Vite+React项目跨域问题及配置插件,

最新推荐文章于 2025-09-24 11:01:27 发布

原创最新推荐文章于 2025-09-24 11:01:27 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端 #npm

本文讲述了作者在使用Vite5.0+React构建静态页面时遇到跨域问题，通过安装并配置`vite-plugin-legacy`以及添加特定polyfills来解决此问题的过程。

之前接兼职用vite+vue的时候就出现过

这次用vite5+react给公司写了一个静态页面打包之后，

打开dist文件中的index.html是空白

F12查看后是跨域报错

解决方法如下：

npm install --save-dev @vitejs/plugin-legacy

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

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    react(),
    legacy({
      targets: ["ie>=11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
    }),
  ],
});