在现代的前端开发中，我们经常需要根据不同的环境（如开发环境、生产环境和测试环境）来配置不同的参数。Vite，作为一个现代化的前端构建工具，提供了对环境文件和环境变量的原生支持，使得开发者能够轻松地管理和使用这些变量。
一、为什么要配置环境文件和环境变量？
在软件开发过程中，我们的应用程序需要在不同的环境中运行。例如，开发环境通常用于本地开发，生产环境用于部署到线上供用户使用，而测试环境则用于执行自动化测试。这些环境可能会有不同的配置需求，比如API的端点地址、服务的密钥等。通过配置环境文件和环境变量，我们可以确保在构建和运行应用程序时，能够根据当前的环境自动使用正确的配置。
二、环境文件存在哪？后缀名在哪决定？
1.环境文件一定要保存在项目的根目录下，这样Vite才能正确识别和加载它们。
2.环境文件的命名必须以.env为前缀，根据不同的环境，可以追加相应的后缀。例如，开发环境通常使用.env.development，生产环境使用.env.production，测试环境使用.env.test。
3.Vite会根据不同的命令行参数和模式来选择对应的环境文件。默认情况下，开发模式会加载.env.development，而构建生产版本时会加载.env.production。
4.在package.json的scripts字段中，我们可以通过"--mode"参数来指定Vite运行的模式。例如，在开发模式下，我们可以使用vite --mode development来指定加载.env.development文件。
我们可以通过在命令行中传递--mode参数来自定义Vite的运行模式，这样Vite会加载与指定模式相匹配的环境文件。例如，如果我们想要定义一个名为"staging"的新模式，我们可以在package.json的scripts字段中添加一个新的脚本，如下所示：
"scripts": {
"dev": "vite --mode development",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"stage": "vite --mode staging"
}
在这个例子中，我们添加了一个新的脚本"stage"，它使用--mode staging参数。这将告诉Vite加载名为".env.staging"的环境文件。
接下来，我们需要在项目根目录下创建一个名为".env.staging"的文件，并在这个文件中定义所有适用于"staging"环境的变量。
三、环境变量怎么写？
1.环境变量必须以"VITE_"开头，这是Vite规定的命名规范，以区分普通的变量。不以VITE开头的环境变量不起作用。
2.环境变量的值后面不应该加上分号";"，这会导致Vite无法正确解析变量。
正确的写法如下：
VITE_baseURL=127.0.0.1:8000
错误的写法如下（血泪教训啊！！！）：
VITE_baseURL=127.0.0.1:8000;
四、环境变量怎么读出来？
1.在vite.config.ts中取得环境变量
在Vite的配置文件中，我们可以使用loadEnv函数来加载对应模式的环境变量。loadEnv函数接受两个参数，第一个参数是模式，第二个参数是项目根目录的路径。
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
export default ({ command, mode }) => {
const targetUrl: string = loadEnv(mode, process.cwd()).VITE_baseURL;
return defineConfig({
plugins: [vue()],
server: {
open: false,
port: 3000,
proxy: {
"/api": {
target: targetUrl,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
};
如果需要使用process对象，我们需要安装@types/node类型定义文件。安装方法如下：
npm install --save-dev @types/node
2.在组件中取得环境变量
在Vue组件中，我们可以通过import.meta.env对象来访问定义在环境文件中的变量。例如，要访问baseURL，我们可以使用import.meta.env.VITE_baseURL。
总结
通过配置和使用环境文件和环境变量，我们可以在不同的环境下为我们的Vite项目提供适当的配置，从而使得我们的开发流程更加灵活和高效。