VUE+Vite之环境文件配置及使用环境变量

在现代的前端开发中，我们经常需要根据不同的环境（如开发环境、生产环境和测试环境）来配置不同的参数。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项目提供适当的配置，从而使得我们的开发流程更加灵活和高效。