在Vue中处理环境变量

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,
});
2024-03-20

访问量 118

扫码关注公众号“前端微志”

第一时间获取新周刊

预览图片