vue3（vite）配置环境变量

一般在开发时候最常用到(development)开发环境、(production)生产环境、(test)测试环境。

使用场景——这些环境变量通常在以下场景中使用：

• 开发环境(development)：开发人员在本地机器上运行和测试应用程序。
• 测试环境(test)：用于自动化测试，确保在生产环境之前一切正常。
• 生产环境(production)：实际的用户访问应用程序的环境，通常具有优化和最少的日志记录。

通过设置这些环境变量，可以方便地切换不同环境下的配置，而无需修改代码。

可阅读vite官方文档——“环境变量与模式”，了解更多~

*以下是我的项目中运用到的环境变量配置，可根据实际开发配置项目需要的环境变量。

1.创建文件，在vue3根目录创建三个文件，

分别为：.env.development 、 .env.production 、 .env.test

创建的文件必须是 .env 开头。

2.在文件中分别配置内容，如下：

这里强调，一定要 VITE 开头！！！

（1）.env.development

（2）.env.production

（3）.env.test

其中 NODE_ENV='test' 是一个环境变量的设置，它通常用于指定当前 Node.js 应用程序运行的环境。

用途: 这里的test，指示当前应用程序运行在测试环境中。根据这个值，应用程序可以启用或禁用特定的功能。例如，可能会启用更多的日志记录或使用特定的配置文件。

3.在package.json中定义用于管理和运行项目的脚本命令

我这里只多加了一个dev-test命令，用于运行测试环境。

"scripts": {
    "dev": "vite",
    "dev-test": "vite --mode test",
    "build": "vite build",
    "preview": "vite preview"
  },

"dev": "vite"  ->  默认情况下，运行 development开发环境。

"dev-test": "vite --mode test",  ->  用于运行测试的环境，模拟生产环境中的行为以确保代码质量。

"build": "vite build",  ->  准备将项目部署到生产环境时使用 ，打包的时候默认打包生产环境  

 4.在request里使用

 也可以在mian.js打印看一下

console.log('环境变量：', import.meta.env);

 在vite官网里有说明，截图如下：