vite开发测试生成环境配置

本开发环境：

"vue": "^3.2.45"
"vite": "^4.1.0"
"vue-tsc": "^1.0.24"
"@vitejs/plugin-vue": "^4.0.0"
"typescript": "^4.9.3"

采取策略：

创建不同的文件配置不同的变量，再结合不同的命令生成不同的环境及打包文件

步骤：

1，在根目录下新建文件：.env.develop【开发环境】 .env.staging【测试环境】 .env.production【生成环境】，以设置代理地址为例，在每个文件中设置不同的代理请i去地址，如：VITE_PROXY_TARGET_URL=https://localhost:44382/api；需要注意的是，这里的变量需要以VITE_开头，防止配置污染

2，在package.json 中添加配置【分别对应了开发和打包相关的测试】

    "dev": "vite --mode develop",   
    "staging": "vite --mode staging",   
    "pro": "vite --mode production",   
    "build:staging": "vue-tsc && vite build --mode staging",   
    "build:pro": "vue-tsc && vite build --mode production"

在vite.config.ts中使用

使用中需要注意的是：获取值时需要使用defineConfig的参数，并使用loadEnv方法来获取

调试：

可以直接在vite.config.ts中直接使用日志打印，结合在package.json中配置的参数，例如使用
yarn staging -->> 调试测试环境开发
yarn  build:staging -->> 调试测试环境打包

使用vue ui 指令可以立刻查看vite.config.ts中的日志输出

vue ui