vue3如何创建多环境变量

首先在全局目录中新建.env.development文件和.env.production文件、.env.test文件

.env.development文件

VITE_MODE_NAME='development'

VITE_API_URL="http://xxxxxxxxxx"

注意:必须要以VITE_ 去开头,否则获取不到

依次去配置.env.production文件、.env.test文件

然后在vite.config.ts文件中获取环境变量

import { defineConfig ,loadEnv } from 'vite'

export default defineConfig(({ command,mode }) => {

const env = loadEnv(mode, process.cwd()); //重点!!!!

console.log("当前环境", env);

})

配置package.json

"scripts": {

"dev": "vite serve",

"build:dev": "vite build ",

"preview": "vite preview",

"build-only": "vite build",

"type-check": "vue-tsc --noEmit",

"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",

"build:test": "vite build --mode test",

"test": "vite serve --mode test",

"build:prod": "vite build --mode production",

"prod": "vite serve --mode production"

},

通过启动、打包命令去调整你需要哪个环境

相关推荐
~甲壳虫几秒前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat2 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome