Vue 3 项目初始化即配置 CDN 可减少打包体积、提升构建速度；需在 vite.config.ts 中配置 externals 和 globals，并在 index.html 注入带 SRI 的 CDN 链接，同时设置 base 路径托管静态资源。
Vue 3 项目初始化阶段就配置 CDN 加速，能从源头减少打包体积、提升构建速度，并为后续部署打好性能基础。关键不是等项目做完再补，而是把 CDN 策略嵌入脚手架创建后的第一步配置中。
明确哪些资源走 CDN
优先选择稳定、版本可控、全局使用的第三方库，例如：
- Vue 核心：vue、@vue/runtime-dom（对应 vue.global.js 或 vue.runtime.esm-bundler.js）
- 状态与路由：pinia（Vue 3 推荐替代 Vuex）、vue-router
- 工具类库：axios、lodash-es（注意按需引入是否兼容 CDN 全局变量）
不建议 CDN 化的：业务组件、自定义 Hook、带副作用的插件、未提供 UMD/Global 构建版本的包。
修改 vite.config.ts 配置 externals
Vite 项目默认不支持 Webpack 风格的 externals，需借助插件或构建时处理。推荐使用 vite-plugin-external 或手动在 build.rollupOptions.external 中声明：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在
vite.config.ts中添加：
build: {
rollupOptions: {
external: ['vue', 'vue-router', 'pinia', 'axios'],
output: {
globals: {
vue: 'Vue',
'vue-router': 'VueRouter',
pinia: 'Pinia',
axios: 'axios'
}
}
}
}
这会让 Vite 跳过这些模块的打包，但需确保它们在运行时已通过 script 注入为全局变量。
在 index.html 中注入 CDN 资源链接
打开 public/index.html，在 或 底部添加 script 标签（注意顺序和 integrity）：
- 使用官方或可信 CDN，如 unpkg、jsDelivr 或自有 CDN 域名：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.31/dist/vue.global.prod.js" integrity="sha384-..." crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@4.4.5/dist/vue-router.global.prod.js" integrity="sha384-..." crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/pinia@2.2.5/dist/pinia.iife.prod.js" integrity="sha384-..." crossorigin="anonymous"></script>
务必校验 SRI（Subresource Integrity），避免因 CDN 内容被篡改导致运行异常。
调整构建输出路径与静态资源托管
若同时托管 CSS、图片、字体等静态资源到 CDN，需配置构建基础路径：
- 在
vite.config.ts中设置：
base: process.env.NODE_ENV === 'production' ? 'https://cdn.example.com/my-vue3-app/' : '/'
这样所有相对路径资源（如 assets/style.css）都会自动解析为 CDN 地址。记得将 dist 目录下除 index.html 外的文件上传至对应 CDN 路径。
