前言
刚刚迁移完项目,配自动化部署的时候才想起忘记了配环境变量了。
本文顺便记录一下
vue-cli
创建的uni-app
项目配置环境变量的全过程。配置vue
项目也同理
开始配置以前,先简单了解一下 model
和 环境变量
model
首先要先了解 --mode
选项参数。
在 webpack
文档中是这样描述的:
通过选择
development
,production
或none
之中的一个,来设置mode
参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为production
。
vue-cli
给到的例子是
vue-cli-service build --mode development
通过改变 --model
后的名称来区分不同的变量
环境环境变量
你可以在你的项目根目录中放置下列文件来指定环境变量:
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对:
FOO=bar
VUE_APP_WX_BASE_URL=some_value
请注意,只有 NODE_ENV
,BASE_URL
和以 VUE_APP_
开头的变量将通过 webpack.DefinePlugin
静态地嵌入到客户端侧的代码中
下面直接进入正题
首先在项目根目录下创建 3 个环境文件 .env.development
.env.production
.env.stage
修改 package.json
# 名称可以自己定义 只需要正确使用 --model 就可以区分不同环境
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode stage",
# 新增一个环境 这里没有使用 --model,默认使用 production
"build:h5-prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"
在页面中取值
// main.js
// 根据自己定义的名称去正确取值
//#ifdef MP-WEIXIN
const baseUrl = process.env.VUE_APP_WX_BASE_URL
//#endif
//#ifdef H5
const baseUrl = process.env.VUE_APP_BASE_URL
//#endif