如何同时运行Vite Serve与Build两种模式？

针对渐进式迁移SSR站点到Vue的场景，直接用并行命令工具就能同时启动两种模式，具体步骤如下：

• 首先安装并行运行工具concurrently：

  npm install concurrently --save-dev
  

• 修改项目根目录的package.json，添加对应的脚本命令：

  "scripts": {
    "dev": "vite serve", // 启动带HMR的开发服务器，用于完整SPA开发测试
    "build:watch": "vite build --watch", // 监听文件变化自动构建，供旧站点导入组件
    "dev:both": "concurrently \"npm run dev\" \"npm run build:watch\""
  }
  

• 执行npm run dev:both即可同时启动两个进程：

  • 一个是常规的Vite开发服务器，支持热模块替换，方便开发完整SPA应用；
  • 另一个会监听源码变化，自动重新构建产物到指定目录，旧系统可直接从该构建目录导入组件测试。

额外注意事项 #

• 可在vite.config.js单独配置构建输出目录，避免和开发服务器临时资源冲突：

  export default defineConfig({
    build: {
      outDir: 'dist/legacy', // 旧系统从该目录导入组件
      rollupOptions: {
        // 按需配置入口，比如只打包给旧系统用的组件
        input: {
          componentA: './src/components/ComponentA.vue',
          componentB: './src/components/ComponentB.vue'
        }
      }
    }
  })
  

• 旧系统若需实时感知构建文件变化，可自行添加文件监听逻辑，或手动刷新页面测试；
• 开发服务器的HMR仅作用于SPA场景，构建监听的产物更新需旧系统自行处理加载逻辑。

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