如何在HTML中像Webpack一样跨域加载Vite构建项目的资源？

核心配置调整 #

1. 用 base 替代 Webpack 的 publicPath #

Vite 中对应 Webpack publicPath 的配置项是 base，它会统一控制所有资源的基础 URL。在 vite.config.js 中添加该配置：

export default defineConfig({
  // 替换为你的服务器完整域名，可通过环境变量动态设置，比如 process.env.VITE_APP_PUBLIC_PATH
  base: 'https://my-website-domain.com/',
  // ... 其他原有配置
})

构建后，Vite 会自动将所有资源路径（脚本、样式、图标等）生成为完整绝对 URL，无需手动修改 index.html。

2. 确保文件名无哈希（保持与 Webpack 一致） #

你已配置 Rollup 输出文件名规则，可补充禁用 CSS 代码分割进一步确保样式文件名固定，避免 Auth0 端旧 HTML 因哈希变化找不到资源：

build: {
  rollupOptions: {
    output: {
      entryFileNames: `assets/[name].js`,
      chunkFileNames: `assets/[name].js`,
      assetFileNames: `assets/[name].[ext]`
    }
  },
  cssCodeSplit: false
}

模块跨域加载的关键机制 #

Vite 默认输出 ES 模块，和 Webpack 输出的普通脚本不同，ES 模块跨域加载有两个硬性要求：

• 服务器必须配置 CORS 响应头：你的资源服务器需要添加 Access-Control-Allow-Origin 头，允许 Auth0 域名访问（生产环境建议指定具体域名，测试阶段可临时用 *）。
• crossorigin 属性的作用：Vite 自动给脚本、样式标签添加了 crossorigin 属性，该属性会触发浏览器的跨域加载模式，此时服务器必须返回合法的 CORS 头，否则会出现 CORB 或 CORS 错误。

适配 Auth0 的最终步骤 #

1. 重新构建项目：执行 npm run build，此时生成的 dist/index.html 中所有资源路径均为完整绝对 URL，示例如下：

<script type="module" crossorigin src="https://my-website-domain.com/assets/index.js"></script>
<link rel="stylesheet" crossorigin href="https://my-website-domain.com/assets/index.css">

2. 将该 index.html 复制到 Auth0 配置中，替换原 Webpack 版本的 HTML 文件。
3. 验证服务器 CORS 配置：通过浏览器开发者工具查看资源请求的响应头，确认存在 Access-Control-Allow-Origin。

常见问题排查 #

• 手动修改路径后仍无法加载：ES 模块内部的 import 路径也需要是绝对 URL，仅修改 index.html 中的标签无效，必须通过 base 配置让 Vite 自动处理所有路径。
• 出现 CORB 错误：检查资源的 Content-Type 是否正确，同时确认服务器 CORS 头配置符合要求。

内容的提问来源于stack exchange，提问作者Jacob Palmer