vite 多环境变量配置

创建.env.production、.env.develoment、.env.test 文件

配置不同环境的环境变量

例如:

.env.production

javascript 复制代码
NODE_ENV='production'
# API URL
VITE_APP_API_URL='/'

.env.develoment

javascript 复制代码
NODE_ENV='development'
# API URL
VITE_APP_API_URL='/api'

修改package.json中scripts

在指令后加上相应的mode

bash 复制代码
"dev": "vite --mode develoment",
"test:unit": "vitest --mode test",
"build": "run-p type-check \"build-only {@}\" --  \n --mode production",

查看和使用环境变量

通过使用import.meta.env 获取当前所有的环境变量

javascript 复制代码
console.log('环境变量:', import.meta.env);   // 打印环境变量

可以通过环境变量来控制axios的baseURL

javascript 复制代码
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_API_URL || '',
  withCredentials: true,
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
});
相关推荐
脾气有点小暴21 分钟前
详解 HTML Image 的 mode 属性:图像显示模式的灵活控制
前端·html·uniapp
爱吃无爪鱼34 分钟前
03-Bun vs Node.js:JavaScript 运行时的新旧之争
javascript·vue.js·react.js·npm·node.js
0思必得01 小时前
[Web自动化] 开发者工具性能(Performance)面板
运维·前端·自动化·web自动化·开发者工具
心灵的制造商1 小时前
el-tree左侧新增类别和删除类别实例代码
前端·javascript·vue.js
爱吃无爪鱼1 小时前
01-前端开发快速入门路线图
javascript·css·vue.js·typescript·前端框架·npm·node.js
冴羽1 小时前
不知道怎么写 Nano Banana Pro 提示词?分享你一个结构化示例,复刻任意图片
前端·人工智能·aigc
IT_陈寒1 小时前
JavaScript 性能优化:7个 V8 引擎隐藏技巧让你的代码提速200%
前端·人工智能·后端
脾气有点小暴1 小时前
uniapp通用单张图片上传组件
前端·javascript·vue.js·uni-app·uniapp
小菜今天没吃饱1 小时前
DVWA-XSS(stored)
前端·网络安全·xss·dvwa
云飞云共享云桌面1 小时前
研发部门使用SolidWorks,三维设计云桌面应该怎么选?
运维·服务器·前端·网络·自动化·电脑