Vue3 区分开发环境与生产环境

Vue3 区分开发环境与生产环境，并配置 API URL（Vite 项目）

在 Vue 3 使用 Vite 构建的项目中，我们可以通过 .env 文件来区分开发环境和生产环境，并动态设置 API 请求地址。这种方式非常适合前后端分离开发时切换不同接口地址的需求。

一、环境变量配置

Vite 支持通过项目根目录下的 .env .env.development .env.product 文件加载环境变量，根据当前模式自动读取对应的文件：

1. 默认配置（所有环境通用）

创建 .env 文件：

VITE_API_URL=/low-altitude-economys

2. 开发环境配置

创建 .env.development 文件：

VITE_API_URL=/low-altitude-economys_dev

3. 生产环境配置

创建 .env.production 文件：

VITE_API_URL=/low-altitude-economys

⚠️ 注意：VITE_ 前缀是必须的，否则变量不会暴露给客户端使用。

二、配置打包命令

在 package.json 中添加以下构建脚本：

{
  "scripts": {
    "build:dev": "vite build --mode development",
    "build:prod": "vite build"
  }
}

• 使用 npm run build:dev 打包开发环境。
• 使用 npm run build:prod 打包生产环境。

三、在代码中访问环境变量

在组件或请求工具中使用如下方式获取环境变量：

console.log('API Base URL:', import.meta.env.VITE_API_URL);
console.log('当前模式:', import.meta.env.MODE); // 输出 'development' 或 'production'
console.log('是否是生产环境:', import.meta.env.PROD); // 布尔值
console.log('是否是开发环境:', import.meta.env.DEV); // 布尔值

四、输出结果说明

构建命令	使用的 .env 文件	输出的 API 地址
npm run build:dev	.env.development	/low-altitude-economys_dev
npm run build:prod	.env.production	/low-altitude-economys
本地开发	.env.development	/low-altitude-economys_dev

• 当使用build:prod打包时输出

• 当使用build:dev打包时输出

• 本地开发时输出

这样就可以实现根据不同环境请求不同的后端服务，便于调试和部署。

---

总结：

通过 .env 系列文件配合 Vite 的环境机制，我们可以非常方便地管理 Vue3 项目的开发、测试、生产等多套环境配置。这种机制不仅适用于 API 地址的配置，也可以用于其他全局变量的管理。

如果你觉得这篇文章对你有帮助，欢迎点赞 + 收藏支持一下 😊！