如何使用NX搭建Vue3生态Monorepo？寻求官方配套工具方案

官方支持现状 #

目前NX官方已推出稳定的@nx/vue包，完全支持Vue3与Vite的组合，且版本已跟进至NX 15.9及以上，解决了之前依赖版本滞后的问题，无需依赖非官方仓库。

初始化项目步骤 #

1. 创建NX空工作区：

   npx create-nx-workspace@latest
   

   选择「Empty」工作区类型，按需配置包管理器。

2. 安装官方Vue插件：

   npm install -D @nx/vue
   

3. 生成Vue3+Vite应用：

   nx g @nx/vue:app my-vue-app --bundler vite
   

   执行后会自动生成配置好Vue3、Vite的项目结构，支持热更新、构建等基础功能。

配套工具集成方案 #

• Vitest：@nx/vue默认集成Vitest作为测试框架，生成项目时会自动配置测试文件与脚本，也可通过以下命令为已有项目添加：

  nx g @nx/vue:test-configuration --test-runner vitest
  

• Storybook：通过NX官方@nx/storybook插件支持Vue3+Storybook集成：

  1. 安装插件：

     npm install -D @nx/storybook
     

  2. 为Vue应用生成Storybook配置：

     nx g @nx/storybook:configuration my-vue-app
     

     插件会自动适配Vue3与Vite环境，生成.storybook配置文件及示例故事。

• Tailwind CSS：使用NX官方Tailwind插件快速集成：

  1. 安装插件：

     npm install -D @nx/tailwind
     

  2. 为Vue应用添加Tailwind配置：

     nx g @nx/tailwind:configuration my-vue-app
     

     插件会自动修改vite.config.ts与样式文件，确保Tailwind在Vue组件中正常生效。

• Tanstack库（如Vue Query、Vue Router）：这类属于Vue生态独立库，可直接安装使用，NX无额外限制：

  npm install @tanstack/vue-query
  

  安装后在Vue组件中正常引入即可，无需特殊配置。

版本兼容注意事项 #

• 始终保持NX与@nx/vue、@nx/storybook等插件版本一致，避免兼容问题：

  npm install -D nx@latest @nx/vue@latest @nx/storybook@latest @nx/tailwind@latest
  

• 若之前尝试过旧版本搭建，建议删除node_modules、package-lock.json后重新安装依赖。

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