vue-cli 创建的项目增加环境变量

前言

刚刚迁移完项目，配自动化部署的时候才想起忘记了配环境变量了。

本文顺便记录一下 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