有能力的可以直接看vite官方文档:环境变量和模式 | Vite 官方中文文档
简单操作步骤:创建不同环境的配置文件,在配置文件中声明VITE_开头的变量并赋值,然后在项目中引入这个变量并使用。
创建配置文件
一般分为开发模式和生产模式两种,可以创建两种不同的环境配置文件。
.env.development 文件:开发环境
// 开发环境
ENV = 'development'
VITE_BASE_URL='https://xxx'
.env.production 文件:生产环境
// 生产环境
ENV = 'production'
VITE_BASE_URL='https://xxx'
默认情况下,开发服务器 (dev
命令) 运行在 development
(开发) 模式,而 build
命令则运行在 production
(生产) 模式。
这意味着当执行 vite build
时,它会自动加载 .env.production
中可能存在的环境变量。
引入配置变量
在axios请求里面配置使用环境变量里面的url:
const baseURL = import.meta.env.VITE_BASE_URL
const request = axios.create({
baseURL: baseURL,
withCredentials: false,
timeout: 20000,
})
测试使用
如果配置好了之后,可以测试请求的路径是否发生了变化,或者在html中显示一下这个变量是否发生变化:在html中使用:
如果你要想在vite配置文件中使用,就看一下官网的配置文档吧:配置 Vite | Vite 官方中文文档