阅读数:6 评论数:0

一、构建环境

在 Vite 项目中，通常有三种环境：

• development: 开发环境，通常通过 vite 或 npm run dev 启动。
• production: 生产环境，通常通过 vite build 或 npm run build 构建。
• 自定义环境：你可以通过自定义 .env 文件来定义其他环境。

1、使用示例

你可以在代码中使用 import.meta.env.MODE 来进行环境判断：

if (import.meta.env.MODE === 'development') {
  console.log('Running in development mode');
} else if (import.meta.env.MODE === 'production') {
  console.log('Running in production mode');
} else {
  console.log(`Running in ${import.meta.env.MODE} mode`);
}

2、自定义环境

（1）创建自定义环境文件

你可以在项目根目录下创建 .env 文件，例如 .env.staging：

VITE_API_DOMAIN=https://staging.api.example.com

（2）使用自定义环境

通过命令行指定环境文件：

vite --mode staging

或者在构建时：

vite build --mode staging

二、自定义环境变量

1、定义环境变量

在项目的根目录下创建一个 .env 文件，并在其中定义变量。例如：

VITE_API_DOMAIN=https://api.example.com

注意：所有自定义环境变量必须以 VITE_ 前缀开头。

2、访问环境变量

在你的 Vue 组件或 JavaScript 文件中，你可以通过 import.meta.env 访问这些变量：

const apiDomain = import.meta.env.VITE_API_DOMAIN;
console.log(apiDomain); // 输出: https://api.example.com