基于Vite+TypeScript+Vue3，无需Nodemon实现文件变更自动执行build命令

除了nodemon，你可以直接利用vue-tsc和vite build原生支持的--watch参数，结合脚本工具实现自动构建，以下是具体可行方案：

方案1：用concurrently并行运行双watch进程 #

vue-tsc --watch和vite build --watch都是持续运行的监听进程，借助concurrently可以让它们跨平台并行执行：

1. 安装依赖：

   npm install concurrently --save-dev
   

2. 修改package.json的scripts，新增监听构建命令：

   "scripts": {
       "dev": "vite",
       "build": "vue-tsc && vite build",
       "watch:build": "concurrently \"vue-tsc --watch\" \"vite build --watch\"",
       "preview": "vite preview"
   }
   

3. 启动监听：

   npm run watch:build
   

文件变更时，vue-tsc会自动执行类型检查，vite会同步触发重新构建，两者并行运行。

方案2：用npm-run-all实现并行监听 #

和concurrently逻辑类似，npm-run-all也能实现多命令并行，适合习惯该工具的场景：

1. 安装依赖：

   npm install npm-run-all --save-dev
   

2. 配置scripts：

   "scripts": {
       "dev": "vite",
       "build": "vue-tsc && vite build",
       "watch:tsc": "vue-tsc --watch",
       "watch:vite": "vite build --watch",
       "watch:build": "npm-run-all -p watch:tsc watch:vite"
   }
   

其中-p参数表示并行启动两个watch进程，效果和方案1一致。

方案3：配置Vite原生build.watch+单独启动类型检查 #

直接在Vite配置中开启构建监听，再单独运行vue-tsc的watch命令：

1. 修改vite.config.ts：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()],
     build: {
       watch: {
         include: 'src/**/*' // 自定义监听文件范围，默认覆盖所有源码
       }
     }
   })
   

2. 打开两个终端窗口，分别运行：

   # 终端1：监听类型检查
   vue-tsc --watch
   # 终端2：监听构建
   vite build
   

这种方式无需额外安装工具，但需要手动管理多终端进程，适合不想新增依赖的场景。

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