vite 配置环境变量和多环境打包命令

承接上一篇配置自动发布指令，这次说说环境变量设置

一般项目都会有三种环境1，开发环境。2，测试环境。3，生产环境
有的项目要求比较高，有多个测试环境，还有生产预发布环境

问题

我的个人项目要求比较低，只有开发环境和生产环境，没有测试环境（毕竟自己亲手写的代码都是嘎嘎棒，不可能有问题）

这种情况下，我只要识别两种环境，即开发环境和生产环境就行了，使用脚手架的node环境变量就能做到

如果这时候再加一个测试环境，而且测试环境的后端接口地址也不一样，阁下该如何应对？

解决方案：使用自定义指令识别不同环境变量

第一步：修改打包命令里的 mode 值

这个的mode 的值要和.env.xxxx 的xxx对应

打包命令后跟的自定义指令会识别.env.后的环境名称里面的值，如果没有修改--mode 默认情况下，开发环境的mode值是development生产环境的mode值是production

第二步：在第一步里设置的mode值可以在vite.config.js里获取到

首先要把defineConfig({})改为函数形式

import { defineConfig, loadEnv } from 'vite'
...
...
...
defineConfig(({mode})=>{
    let baseURL=loadEnv(mode,process.cwd()).VITE_BASEURL
    return {
        ...
        ...
        ...
        server:{
          proxy:{
            '/shopApi':{
              target:baseURL,
              changeOrigin:true,
              rewrite:(path)=>path.replace(/^\/shopApi/,'')
            },
          }
        }
    }
})

这样就可以轻松愉快的打包啦