一份代码跑两个服务，一个热更新一个冷更新

使用场景：

后端要使用我本地的前端服务，我同时也在改我的前端代码，因为vite或webpack默认热更新，导致我改代码保存后，后端的客户端也会刷新。他可能一大坨表单辛辛苦苦快录完了，一个自动刷新全没了，他就要过来干你。怎么避免呢？我们跑两个服务，一个热更新我们自己测，一个冷更新给其他人用。这样，我们改代码后他们不会马上自动刷新页面，而是要他们自己手动刷新。

实现方式：

以vite为例

第一步：在env.dev文件里准备两个环境变量

// 端口
VITE_APP_PORT = 80
// 是否开启热更新
VITE_DISABLE_HMR = true

第二步：在vite.config.ts里使用这两个环境变量

server: {
  // 环境变量里都是字符串，所以这样判断,用==还是===看个人爱好
  hmr: env.VITE_DISABLE_HMR == 'true',
  host: '0.0.0.0',
  // 同上，端口配置字符串要转为数字
  port: Number(env.VITE_APP_PORT),
  open: true,
  proxy: {
      ...
  }
},

第三步：

在package.json中新增一条启动命令

 "scripts": {
     // 这是使用默认配置的热更新启动
    "dev": "vite serve --mode development",
    // 这是新增的冷更新启动
    "dev:nohot": "set VITE_DISABLE_HMR=false && set VITE_APP_PORT=81 && vite serve --mode development",
 }

原理就是在默认的启动命令前，动态改了一下环境变量，关闭热启动，并启用一个新端口。 这样 npm run dev 的服务自己用， npm run dev:nohot 的服务给别人用，完美。