Vue使用广泛采用的 dotenv 模块从环境目录中加载构建配置，这些配置存储在以下文件中：

.env                # 在所有情况下加载
.env.local          # 在所有情况下加载，git忽略
.env.[mode]         # 仅在指定模式下加载
.env.[mode].local   # 仅在指定模式下加载，git忽略

每个文件具有以下格式：

VITE_SOME_KEY=123
DB_PASSWORD=secret

所有以 VITE_ 前缀开头的内容将自动在客户端应用程序中 import.meta.env 中可用：

<script setup>
console.log(import.meta.env.VITE_SOME_KEY) // "123"
</script>

如果您使用 vue-cli，则前缀为 VUE_

应用程序的其他部分可以安全地使用 .dotenv 文件，而无需 VITE_ 前缀，因此变量不会泄露到客户端。

到目前为止都很简单。在实际情况下，您将为每个环境创建多个配置文件。

例如，在本地

# .env.local
VITE_BACKEND_URL=http://localhost:3000/
VITE_PUBLIC_URL=http://localhost:3000/uploads/

而在生产环境中

# .env.production
VITE_BACKEND_URL=http://example.com/
VITE_PUBLIC_URL=http://example.cloudflare.com/uploads/

在客户端，我们可以直接使用这些变量，因为它们是全局可用的：

// /lib/fetch.ts  

import axios from "axios";  

const instance = axios.create({  
  baseURL: import.meta.env.VITE\_BACKEND\_URL,  
});

如果您使用typescript（应该使用，对吧？），您可能会看到一个不太有用的错误：

Property 'env' does not exist on type 'ImportMeta'.ts(2339)

为了使TS满意，创建文件 src/types/vite-env.d.ts，其内容如下：

/// <reference types="vite/client" />  

interface ImportMetaEnv {
  readonly VITE_PUBLIC_URL: string;
  readonly VITE_BACKEND_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

最后，我觉得在代码中引用 import.meta.env.VITE_BACKEND_URL 有点冗长。我通常会创建一个中间的 appSettings.ts 文件来封装它。

// src/config/appSetings.ts

export default {
  baseURL: import.meta.env.VITE_BACKEND_URL,
  publicUrl: import.meta.env.VITE_PUBLIC_URL,
};

这样我们的原始代码会变得更简单。

import axios from "axios";
import { baseUrl } from "@/config/appSetings"

const instance = axios.create({
  baseURL,
});