Vite项目配置CDN加速需四步：一、通过base配置生产环境静态资源路径为CDN域名；二、用vite-plugin-cdn-import外链第三方库；三、按文件哈希情况设置差异化缓存策略；四、通过响应头、多地区测速及控制台验证缓存命中率。
在 Vite 项目中配置静态资源 CDN 加速，核心是让打包后的 JS、CSS、图片等资源自动指向 CDN 域名，并配合合理的缓存策略与回源设置，真正实现全球边缘节点分发。操作不复杂，但关键点容易被忽略。
一、修改构建输出路径，让资源自动走 CDN
Vite 通过 base 配置项控制所有静态资源的根路径。生产环境需将其设为 CDN 域名：
- 在
vite.config.ts中按环境区分：base: process.env.NODE_ENV === 'production' ? 'https://static.example.com/' : '/' - 确保 CDN 域名已备案（国内）且 DNS 已正确绑定 CNAME（如
static.example.com → xxx.cdnprovider.com） - 该配置会影响
<link>、<script>、background-image、import()动态加载等所有相对路径资源
二、对第三方库启用 CDN 外链（可选但推荐）
避免将 jQuery、Vue、Lodash 等通用库打包进产物，直接从公共 CDN 加载，减小包体积、提升复用率：
- 安装插件：
npm install vite-plugin-cdn-import -D - 在
vite.config.ts的plugins中添加：vitePluginCdnImport({<br> prodEnv: true,<br> provides: {<br> vue: ['https://unpkg.com/vue@3.4.27/dist/vue.esm-browser.js', 'Vue'],<br> lodash: ['https://cdn.jsdelivr.net/npm/lodash@4.17.21/index.js', '_']<br> }<br>}) - 插件会自动将
import Vue from 'vue'替换为 CDN 脚本注入，无需改业务代码
三、按文件类型设置差异化缓存策略
CDN 缓存效果取决于响应头，Vite 本身不生成缓存头，需靠 CDN 控制台或源站 Nginx 补充：
立即学习“Java免费学习笔记（深入）”；
- 带哈希的资源（如
assets/index.a1b2c3.js）：CDN 设置Cache-Control: public, immutable, max-age=31536000（1 年） - 无哈希的通用资源（如
vendor.js或未版本化的main.js）：设max-age=300（5 分钟），避免逻辑更新不生效 - 强制忽略查询参数（如
?t=123）：开启 CDN 的「忽略 URL 参数」选项，防止缓存分裂
四、验证是否真正生效
上线后不能只看页面能打开，要确认请求是否命中 CDN 边缘节点：
- 浏览器开发者工具 → Network 标签 → 查看 JS/CSS 请求的响应头：
有x-cache: HIT或x-cdn-cache: HIT表示命中缓存 - 对比不同地区访问速度（可用 KeyCDN Speed Test 或 WebPageTest）
- 登录 CDN 控制台查看「缓存命中率」——理想值应 >95%，若低于 90% 需检查回源配置或缓存规则
