如何在Angular 17中配置自定义Vite配置？

需求 #

需要配置 Vite 的 optimizeDeps 选项，排除指定第三方包，目标配置代码如下：

export default {
  optimizeDeps: {
      disabled: false,
      exclude: [
          'my-third-party-package',
      ],
  },
}

已尝试但无效的操作 #

• 运行 ng eject 命令
• 查阅 Angular 新构建系统官方文档
• 在项目根目录创建 vite.config.js 文件，期望 Angular 自动识别加载

有效解决方案 #

Angular 17 的构建系统基于 Esbuild 和 Vite，但不会自动读取根目录的 vite.config.js，需通过 Angular CLI 配置文件指定加载路径：

1. 打开项目根目录的 angular.json，找到对应项目的 architect.build 和 architect.serve 配置节点，添加 viteConfiguration 字段指向你的自定义 Vite 配置文件：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "viteConfiguration": "./vite.config.js",
            // 保留原有其他配置
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "viteConfiguration": "./vite.config.js",
            // 保留原有其他配置
          }
        }
      }
    }
  }
}

2. 确认你的 vite.config.js 内容符合需求且路径正确。

3. 重新执行 ng build 或 ng serve 命令，Angular CLI 会加载并应用自定义的 Vite 配置。

补充说明：ng eject 命令已在 Angular 新版本中移除，因此该操作无效；官方文档中关于 Esbuild 的内容侧重构建优化逻辑，Vite 配置相关的细节需结合 Angular CLI 与 Vite 的集成规则处理。

内容的提问来源于stack exchange，提问作者MrFullStack