vite可通过vite-plugin-cdn-import插件实现vue从cdn加载：自动替换import语句为window.vue引用、注入cdn脚本、避免打包vue；需确保main.ts不重复import且配置name/var与cdn一致。
Vite 本身不直接支持在 vite.config.ts 中把 Vue 从 CDN 加载（比如像 Webpack 的 externals），但可以通过插件 + 构建阶段干预实现：让 Vite 在构建时跳过打包 Vue，改用 CDN 提供的全局变量，并确保 HTML 中正确注入 script 标签。关键点是「不打包、不 import、靠全局变量」。
✅ 正确配置思路：用 vite-plugin-cdn-import 插件
这是目前最稳定、适配 Vite 4/5 的方案。它会在构建时：
- 自动替换
import 'vue'为对全局Vue变量的引用 - 向生成的
index.html注入对应 CDN<script></script> - 避免重复打包 Vue（体积显著减小）
1. 安装插件
npm install -D vite-plugin-cdn-import # 或 yarn add -D vite-plugin-cdn-import
2. 修改 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'
export default defineConfig({
plugins: [
vue(),
importToCDN({
modules: [
{
name: 'vue',
var: 'Vue', // 必须与 CDN 全局变量名一致
path: 'https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js'
}
]
})
]
})
⚠️ 注意事项：
name: 'vue'必须和你代码中import { ref } from 'vue'的包名完全一致（大小写、无路径）var: 'Vue'对应 CDN 文件挂载到window.Vue上（vue.global.min.js就是这样导出的）- 不要同时在
main.ts里import { createApp } from 'vue'—— 这会导致打包报错或运行时冲突- 所有 Vue 相关 API（如
ref,computed,onMounted）仍可直接 import，插件会自动转成Vue.xxx调用
3. 确保 main.ts 不再 import Vue（重要！）
错误写法 ❌：
import { createApp } from 'vue' // → 会尝试打包 Vue，与 CDN 冲突
正确写法 ✅（保持原有语法，插件自动处理）：
import { createApp } from 'vue' // ✅ 插件会把它转成 window.Vue.createApp
import App from './App.vue'
createApp(App).mount('#app')
Vite 插件会在构建时把所有 import { xxx } from 'vue' 替换为对 window.Vue.xxx 的访问，无需手动改代码。
? 不推荐的方式（常见误区）
在
index.html手动加<script></script>+declare const Vue: any
→ 类型丢失、HMR 失效、开发时无提示，且import 'vue'仍会被打包，体积没减少。在
vite.config.ts里用build.rollupOptions.external = ['vue']
→ Vite 会跳过打包，但不会注入 CDN 脚本，也不会处理import语句，运行时报Cannot resolve module 'vue'。用
define: { __VUE_VERSION__: '3.5.13' }模拟
→ 不能替代实际依赖，只是字符串替换，无法解决模块加载问题。
✅ 验证是否生效
构建后检查 dist/index.html，应包含类似：
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js"></script>
且 dist/assets/*.js 中不再出现 Vue 的源码片段（可通过搜索 function createApp 判断）。
同时浏览器控制台 window.Vue 应存在，且 typeof Vue === 'object'。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
