灏天阁

vue3.2/Vite/Ts10: 环境变量配置

· Yin灏

开发环境

每位开发人员在自己的 dev 分支上干活,开发到一定的程度,同事会合并代码,进行联调。

测试环境

测试同事干活的环境,一般会由测试同事自己来部署,然后在此环境进行测试。

生成环境

指正式提供对外服务的,一般会关掉错误报告,打开错误日志。

注意:一般情况下,一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器。

项目根目录分别添加开发/生产/测试环境的文件:

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

文件内容

  • .env.development
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '运营平台'
VITE_APP_BASE_API = '/dev-api/'
VITE_SERVER = 'https:xxxx.com'
  • .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 获取环境变量

- Book Lists -