正确答案是必须在 vite.config.ts（或 .js）中配置 build.rollupoptions.external，类型仅支持 string[] 或 (id) => boolean 函数，用于告知 rollup 将指定模块视为外部依赖而不打包；需同步在 html 中引入 cdn 脚本或配置 globals 映射以确保运行时可用。
直接在 vite.config.ts（或 .js）里配置 build.rollupOptions.external，就能让 Vite 在构建时跳过指定模块的打包，使其不被包含进最终产物——而是交由运行时环境（如 CDN、全局变量或宿主应用）提供。
external 的作用本质
它不是“排除代码”，而是告诉 Rollup：“这个模块你别处理，当作外部依赖对待”。Rollup 会移除其导入语句（如 import axios from 'axios'），但保留调用逻辑；最终产物中不会包含该模块代码，也不会生成对应 chunk。
常见用途包括：
- 把 Vue、React 等框架从包中剥离，由 CDN 或宿主注入
- 将大型工具库（如
lodash-es、moment）外链，减小 bundle 体积 - 对接微前端场景，避免子应用重复打包基座已提供的依赖
正确写法：支持两种格式
必须放在 vite.config.ts 的 build.rollupOptions.external 下，类型严格，仅接受：
-
字符串数组：精确匹配包名（区分大小写）
['vue', 'vue-router', '@ant-design/icons-vue'] -
函数判断：适合正则匹配或动态逻辑
(id) => /^@ant-design\/.*/.test(id) || id === 'echarts'
⚠️ 注意：
– 不要写成对象、null、undefined 或未包装的正则（如 /^@ant-design\/.*/）；
– 若包未安装（如写了 'lodash-es' 却没 npm install lodash-es），Vite 不报错但会静默跳过，可能导致运行时报 Cannot resolve module。
配合 externals 实现运行时加载
仅配置 external 不够——浏览器仍需能访问这些模块。通常需同步做两件事：
-
HTML 中引入 CDN 脚本（适用于独立部署）：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
并确保全局变量名与模块导出一致（如 Vue 对应window.Vue） -
或通过 defineConfig 的 build.lib 模式 + global 引入声明（适用于发布库）：
rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue' } } }
验证是否生效
构建后检查 dist 目录下的 JS 文件：
- 搜索被 external 的包名（如
axios），应找不到其源码片段 - 查看 import 语句是否变成
const axios = __require('axios')或类似占位（说明已被外置） - 用
rollup-plugin-visualizer分析体积，确认对应模块未出现在依赖图中
运行时若报错 Can't resolve 'xxx'，大概率是 external 名写错、包未安装，或 HTML/运行环境未提供该全局变量。
