vue定义和使用全局环境变量

Vue CLI 项目默认使用 .env 文件来定义环境变量。

一、创建.env.文件

.env —— 所有模式共用
.env.local —— 所有模式共用，但不会被 git 提交，自动添加到.gitignore
.env.development —— 仅开发模式使用，使用npm run server时默认会加载此配置文件
.env.developmen.local—— 仅开发模式使用，但会被 git 忽略自动添加到.gitignore，使用npm run server时默认会加载此配置文件
.env.production —— 仅生产模式使用，使用npm run build时默认会加载此配置文件
.env.staging—— 仅staging模式使用，使用需要配置–mode staging

二、编写内容

# 开发环境配置
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'

# 测试环境接口地址
# VUE_APP_BASE_API = 'http://localhost:8001'
# 测试服务器
VUE_APP_BASE_API = 'http://150.xxx.xxx.xx:8001'

VUE_APP_WEBSOCKET_URL = 'ws://150.xxx.xxx/'
VUE_CLI_BABEL_TRANSPILE_MODULES = true

切记：在配置文件中定义自定义变量时，一定要以 VUE_APP_开头，否则Vue无法读取此变量

三、在package.json文件中编写启动命令

除了.env文件会自动被加载外，其他环境需要手动的添加加载指令

"scripts": {
    "serve": "vue-cli-service serve", 
    "serve:prod": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "lint": "vue-cli-service lint"
  }

如果你运行npm run serve:prod命令，那就是引用的.env.production文件的环境变量。因为"serve:prod"配置了"–mode production"。其他同理

vue文件引用

vue文件引用全局变量：

process.env.VUE_APP_WEBSOCKET_URL 

无效原因：
1.记得修改了.env文件后，重新运行一下npm run的命令
2.没有以VUE_APP_开头(PS:vite里是VITE_开发)
2…dev文件没有和package.json文件同一目录下

上面是vue2+webpack的环境变量配置，以下是vue3+vite的环境变量配置

项目根目录分别添加 开发、生产和测试环境的文件：

.env.development文件：

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-api'
NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'

.env.production文件：

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'

.env.test文件：

变量必须以 VITE_ 为前缀才能暴露给外部读取

NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'

配置运行命令：package.json文件

 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },

通过import.meta.env获取环境变量

console.log("获取全局变量", import.meta.env.VITE_APP_BASE_API)