本文详解如何让 Vite 构建的 Vue 3 应用支持跨域静态资源加载——通过正确配置 base、禁用哈希、适配 HTML 模板及构建路径，使 dist/index.html 可直接部署到第三方平台（如 Auth0），并从自有域名可靠加载 JS/CSS 资源。
本文详解如何让 vite 构建的 vue 3 应用支持跨域静态资源加载——通过正确配置 `base`、禁用哈希、适配 html 模板及构建路径，使 `dist/index.html` 可直接部署到第三方平台（如 auth0），并从自有域名可靠加载 js/css 资源。
Vite 默认将 index.html 视为开发入口模板而非构建目标，其构建逻辑与 Webpack 有本质差异：它不自动重写 <script></script> 和 <link> 的路径，也不默认注入带全量 URL 的资源引用。当你需要像 Webpack 那样将 index.html 托管在 Auth0 等第三方 IdP 平台，并跨域加载托管在你自有域名（如 https://my-website-domain.com）上的 JS/CSS 资源时，必须显式控制三类关键行为：资源基础路径、文件名哈希策略、HTML 输出结构。
✅ 核心配置：base 是跨域加载的基石
Vite 的 base 配置项直接决定所有静态资源（JS、CSS、图片、字体等）在 HTML 中生成的相对/绝对路径前缀。若未设置，Vite 默认使用 /，导致构建后 HTML 中的 <script type="module" src="/assets/index.js"></script> 尝试从当前页面所在域（Auth0 域）加载资源，必然 404。
✅ 正确做法：在 vite.config.ts（或 .js）中强制指定完整生产 CDN 域名：
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
// ? 关键：设为你的生产资源根地址（含协议和域名）
base: 'https://my-website-domain.com/',
plugins: [vue()],
build: {
// ? 禁用文件名哈希 —— 否则每次构建生成不同文件名（如 index.a1b2c3.js），
// Auth0 上的 HTML 无法动态更新，将永久失效
rollupOptions: {
output: {
entryFileNames: 'assets/index.js',
chunkFileNames: 'assets/[name].js',
assetFileNames: 'assets/[name].[ext]'
}
}
}
})⚠️ 注意：
base必须以/结尾（如'https://my-website-domain.com/'），否则 Vite 会拼接出错误路径（如https://my-website-domain.comassets/index.js）。
构建后，dist/index.html 中的脚本标签将自动变为：
<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">
这正是 Auth0 所需的“跨域加载”形态。
✅ 补充关键项：禁用哈希 + 显式管理 favicon 路径
Webpack 时代通过 filenameHashing: false 实现稳定文件名，Vite 中需通过 rollupOptions.output 显式覆盖默认哈希行为（如上所示）。但仅此还不够——你还需确保 HTML 中的 <link rel="icon"> 也使用绝对 URL：
<!-- dist/index.html（构建后自动生成，但 favicon 需手动修正） --> <link rel="icon" type="image/png" sizes="32x32" href="https://my-website-domain.com/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://my-website-domain.com/favicon-16x16.png">
? 提示：Vite 不会自动重写 <link> 中的 href（除非是 CSS/JS 等模块化资源），因此 favicon、preload 等静态链接必须在源 index.html 中就写成绝对 URL：
<!-- 项目根目录的 index.html（开发时即应如此编写） --> <link rel="icon" type="image/png" sizes="32x32" href="https://my-website-domain.com/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://my-website-domain.com/favicon-16x16.png"> <link rel="preload" as="script" href="https://my-website-domain.com/assets/index.js">
Vite 构建时会保留这些硬编码路径，而只重写由构建系统生成的模块资源（<script type="module"></script> 和 <link rel="stylesheet">）。
✅ 进阶验证：检查构建产物是否符合预期
运行 npm run build 后，务必打开 dist/index.html 手动验证以下三点：
- ✅
<script></script>和<link rel="stylesheet">的src/href是否为完整 HTTPS URL（非/assets/...）； - ✅
favicon等静态资源链接是否已按你预设的绝对路径存在； - ✅
assets/目录下是否存在index.js、index.css（无哈希）及其他依赖文件。
若任一不满足，说明 base 未生效、rollupOptions 被意外覆盖，或 HTML 模板未按规范编写。
? 总结：Vite 跨域加载四步法
| 步骤 | 操作 | 目的 |
|---|---|---|
1. 设 base |
base: 'https://your-domain.com/' |
让所有构建资源路径自动带上全量 URL 前缀 |
| 2. 关哈希 | entryFileNames: 'assets/index.js' |
保证 JS/CSS 文件名稳定，便于第三方 HTML 硬编码引用 |
| 3. 修 HTML 模板 | 在源 index.html 中 favicon/preload 使用绝对 URL |
Vite 不重写非模块化静态链接，需人工保障 |
| 4. 验证产物 | 打开 dist/index.html 检查所有 src/href
|
避免部署后因路径错误导致白屏 |
完成以上配置后，你可将 dist/index.html 全文复制粘贴至 Auth0 IdP 的 HTML 配置区，其余资源（assets/ 下所有文件）全部托管于 https://my-website-domain.com，即可实现与 Webpack 完全一致的跨域加载能力——零修改、零兼容层、纯标准 Vite 方案。
