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"

},

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

相关推荐
小镇程序员13 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐16 分钟前
前端图像处理(一)
前端
程序猿阿伟23 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒25 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪33 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背36 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5