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