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 中声明：

• 在 vite.config.ts 中添加：

build: {
  rollupOptions: {
    external: ['vue', 'vue-router', 'pinia', 'axios'],
    output: {
      globals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        pinia: 'Pinia',
        axios: 'axios'
      }
    }
  }
}

这会让 Vite 跳过这些模块的打包，但需确保它们在运行时已通过 script 注入为全局变量。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

在 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 路径。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！