vite配置环境变量

vue3--vite环境变量的配置
Vue3+vite配置（Vue3系统篇五）

一. 创建不同环境的.env 文件

.env.development
.env.production
.env. test

二. 配置变量

//.env.development  

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_BASE_API = 'http://www.testBaidu.com'

//.env.production     

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'production'
VITE_APP_BASE_API = 'http://www.szBaidu.com'

//.env.test

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_BASE_API = 'http://www.testBaidu.com'

三. package.json中配置运行命令

使用 --mode XX 可以指定对应的环境:
例如: "build:test": "vite build --mode test" 指定 .env.test 环境
使用: 终端命令: npm run build:test 即可打包 test 环境包

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:test": "vite build --mode test",
    "preview": "vite preview"
  },

四 . 访问和使用

变量访问:
通过 import.meta.env 访问环境变量
例如:

  console.log(import.meta.env.VITE_APP_BASE_URL, '环境VITE_APP_BASE_URL')

终端命令切换

参考package.json中的 scripts 来输入命令:

npm run dev    // 默认运行 .env.development  环境地址
npm run build    // 默认打包 .env.production  环境地址  
npm run build:test  //  打包 .env.test  环境地址