Logo

# Vue3教程 - 23 多环境配置与发布

在实际的开发中，项目会分为生产和测试环境，针对不同的环境会有不同的配置，例如服务器地址等。

所以需要针对不同的环境使用不同的配置文件，总不能每次都修改，容易出错。

# 23.1 创建配置文件

在 Vue 3 中进行多环境配置时，通常会借助 Vite 的环境变量功能。

首先在项目根目录创建.env文件即可。

  1. 创建普通全局变量 .env
  2. 创建开发环境变量 .env.development
  3. 创建测试环境变量 .env.test
  4. 创建生产环境变量 .env.production

在这些文件中，可以定义环境变量，格式为 VITE_ 开头，格式是：VITE_变量名=值，如：

# 在.env.development文件中
VITE_API_URL=http://localhost:8080/api

# 在.env.test文件中
VITE_API_URL=https://test.doubibiji.com/api

# 在.env.production文件中
VITE_API_URL=https://www.doubibiji.com/api
1
2
3
4
5
6
7
8

# 23.2 使用环境变量

在 Vue 组件或 JS/TS 脚本文件中，可以通过 import.meta.env 来访问这些变量。例如：

内容未完......
查看完整内容 →

← 24-其他API →