vite 环境变量 和 模式

一、创建.env文件

参考vue3+vite项⽬搭建-配置环境变量env

// 在根目录创建".env"文件
.env
.env.production 
.env.development

Vite 使用 dotenv 从 [环境目录] 中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载 | 全局
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载 | 指定“开发模式”、“生产模式” 
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

二、定义环境变量：

• 测试API 和 生产API 在同一个URL

# .env.development 开发模式
VITE_BASE_API = 'api' 
# .env.production 生产模式
VITE_BASE_API = 'pro-api' 

• 不是同一个URL，定义两个URL

# 开发环境
VITE_ENV = 'development'
# 开发环境接口地址
VITE_API_URL = 'https://development1.com/api/'

# 生产环境
VITE_ENV = 'production'
# 生产环境接口地址
VITE_API_URL = 'https://development2.com/api/'

三、在代码中使用环境变量

在Vite中，你可以通过import.meta.env对象来访问在.env文件中定义的环境变量。 ——参考：加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码

console.log(import.meta.env.VITE_BASE_API)

四、在使用axios请求接口时配置基本路径

import axios from "axios"
export service http = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
    timeout: 10000,
})