NX+Angular17项目无angular.json时如何启用Vite

我使用最新版本的NX和Angular 17，但项目尚未启用Vite。网上的启用指南均不适用，因为我的项目没有angular.json文件，而是为每个库和应用单独配置了project.json文件。请问该如何启用Vite？

环境信息 #

NX及相关依赖 #

Node   : 18.13.0
OS     : darwin-arm64
npm    : 8.19.3

nx                 : 18.2.4
@nx/js             : 18.2.4
@nx/jest           : 18.2.4
@nx/linter         : 18.2.4
@nx/eslint         : 18.2.4
@nx/workspace      : 18.2.4
@nx/angular        : 18.2.4
@nx/cypress        : 18.2.4
@nx/devkit         : 18.2.4
@nx/eslint-plugin  : 18.2.4
@nx/express        : 18.2.4
@nx/node           : 18.2.4
@nx/storybook      : 18.2.4
@nrwl/tao          : 18.2.4
@nx/web            : 18.2.4
@nx/webpack        : 18.2.4
nx-cloud           : 18.0.0
typescript         : 5.4.5
---------------------------------------
Community plugins:
@fortawesome/angular-fontawesome : 0.9.0
@ngneat/tailwind                 : 7.0.3
@scullyio/init                   : 2.1.41
@storybook/angular               : 7.6.17
rxjs                             : 6.6.7

Angular及相关依赖 #

Angular: 17.3.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, pwa, router
... service-worker, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.3
@angular-devkit/build-angular   17.3.3
@angular-devkit/core            17.3.3
@angular-devkit/schematics      17.3.3
@angular/fire                   7.6.1
@angular/google-maps            13.3.9
@schematics/angular             17.3.3
ng-packagr                      17.3.0
rxjs                            6.6.7
typescript                      5.4.5
zone.js                         0.14.4

解决方案 #

针对你的单项目project.json结构，NX 18已经提供了内置的Vite迁移工具，无需手动修改配置文件，步骤如下：

1. 执行单项目Vite转换命令
   对每个需要启用Vite的Angular应用，运行以下命令（替换<your-project-name>为实际项目名称）：

   nx generate @nx/angular:convert-to-vite --project=<your-project-name>
   

   该命令会自动完成：

   • 修改对应项目的project.json，将build、serve、test等目标的builder替换为Vite版本（如@nx/angular:build-vite、@nx/angular:dev-server-vite）
   • 在项目根目录生成vite.config.ts配置文件
   • 迁移现有Webpack相关配置到Vite（如环境变量、assets配置等）

2. 验证配置修改
   打开目标项目的project.json，确认以下配置已更新：

   • build目标的builder为@nx/angular:build-vite
   • serve目标的builder为@nx/angular:dev-server-vite
   • test目标若使用Karma，需替换为@nx/angular:test-vite（如需保留Karma可忽略此步骤）

3. 适配第三方插件（如Tailwind）
   由于你使用了@ngneat/tailwind，需确保Vite配置中集成Tailwind插件：
   在项目的vite.config.ts中添加Tailwind配置：

   import { defineConfig } from 'vite';
   import angular from '@nx/angular/plugins/vite';
   import tailwindcss from 'tailwindcss';
   import autoprefixer from 'autoprefixer';
   
   export default defineConfig({
     plugins: [angular()],
     css: {
       postcss: {
         plugins: [tailwindcss(), autoprefixer()],
       },
     },
   });
   

4. 测试项目运行
   启动应用验证Vite是否正常工作：

   nx serve <your-project-name>
   

   若终端显示Vite的启动日志，且应用能正常访问，说明迁移成功。

5. 可选：移除Webpack依赖
   如果所有项目都已迁移到Vite，可卸载Webpack相关依赖：

   npm uninstall @nx/webpack webpack
   

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