uni-app -- cli创建多环境以及打包问题

最近项目又多又急，还全部都是没接触过的技术，RN，uni-app，上手就要写项目，写的实在是异常艰难，uni-app的项目还好，语法上类似于vue，RN写起来就比较痛苦了，样式都不太好写，调试也不太方便。这里就先记录一下uni-app项目的创建环境变量以及打包的流程，做个记录，方便以后查阅。其实，通过hb编辑器，直接创建uni-app项目是可以的，打包的时候直接使用hb的打包功能就行，但是这样只能

白桃味稠鱼烧

8229人浏览 · 2020-08-05 17:34:15

白桃味稠鱼烧 · 2020-08-05 17:34:15 发布

最近项目又多又急，还全部都是没接触过的技术，RN，uni-app，上手就要写项目，写的实在是异常艰难，uni-app的项目还好，语法上类似于vue，RN写起来就比较痛苦了，样式都不太好写，调试也不太方便。

这里就先记录一下uni-app项目的创建环境变量以及打包的流程，做个记录，方便以后查阅。

其实，通过hb编辑器，直接创建uni-app项目是可以的，打包的时候直接使用hb的打包功能就行，但是这样只能做到打包之后，前端开发把打好的包发送给运维，让运维去部署，这样及其浪费时间，而且公司是 jks 自动部署，所以为了这一块，最后选择了通过cli脚手架，创建uni-app项目。

通过vue-cli脚手架创建uni-app项目这是官网的创建教程，直接参考就好。其他的我也没啥说的。

创建多环境

uni-app在创建项目的时候，只分了两种环境：开发，生产。

其实这么说还不对，应该是在我本地开发的时候，只有一个 development 环境，在我打包的时候只有一个 production 环境

但是我们真的在实际开发的时候，肯定不是只有development的。同样的，在打包上线之前，肯定也是不能直接打完包就丢到正式服务器上的。我司就有测试环境，预发环境，正式环境三种。所以uni-app项目的环境是肯定不够的，然后我就开始想着创建多环境。

首先，项目创建好了之后，在package.json中可以看到 npm 命令，可以看到 NODE_ENV 只区分了开发和线上两种模式。这个在官网上也有说明 uni-app开发与生产环境配置，但是可以很明确的看到，在开发的时候，NODE_ENV 只有一个 development ，那我想在本地开发的时候，能存在多个环境。例如：在本地开发，但我我能链接测试，预发，甚至是线上的数据库，现在是做不到的

"build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",

"dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",

在项目运行的时候，我们可以使用 process.env.NODE_ENV 来区分环境，我想增加多个环境，也是可以通过改变 NODE_ENV 的值来实现的。

"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:h5-pre": "cross-env NODE_ENV=pre UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:h5-pro": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-serve",

我在本地开发的时候增加了三个环境分别是 test 、 pre、production，也就是测试、预发和正式环境。通过运行不同的npm命令，执行不同的脚本，获取不同的 NODE_ENV 的值，然后通过不同的 NODE_ENV 区分不同的环境，连接不同的接口。打包的时候也是同一个道理。

/* eslint-disable no-undef */
let baseUrl = "";
if (process.env.NODE_ENV === "development") {
  // 开发环境
  baseUrl = "http://development";
} else if (process.env.NODE_ENV === "test") {
  // 测试环境
  baseUrl = "http://test";
} else if (process.env.NODE_ENV === "pre") {
  // 预发布环境
  baseUrl = "http://pre";
} else if (process.env.NODE_ENV === "production") {
  // 正式环境
  baseUrl = "http://production";
} 
console.log("====================================");
console.log(process.env.NODE_ENV, "process.env.NODE_ENV");
console.log(baseUrl, "baseUrl");
console.log("====================================");
module.exports = {
  baseUrl: baseUrl
};

上面是我新建了一个 config.js 文件，通过区分环境，调用不同环境的接口，项目运行之后，我能在控制台上明确看到我当前的NODE_ENV 是什么值，能看到我当前运行的接口是哪个环境

当我执行的是 dev:h5 脚本：此时控制台打印的 NODE_ENV = development， baseUrl = http://development

当我分别执行 dev:h5-test 、dev:h5-pre 得到的结果分别是

所以可以看到，开发人员是可以通过配置 NODE_ENV 来区分前端开发环境的。

同理，打包也是一样的，新建打包命令，查看打包之后的NODE_ENV以及 baseUrl

新建打包命令

"build:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-pre": "cross-env NODE_ENV=pre UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-pro": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",

打包之后运行项目，通过 http-server在本地运行打包之后的项目，模拟服务器环境

然后执行不同的脚本文件，查看 NODE_ENV以及 baseUrl

分别打了四个不同环境的包，可以看到一件区分出了不同的 NODE_ENV以及 baseUrl。

jks自动化部署

其实上面的build已经做到了区分多环境，那运维在部署的时候，只需要执行对应的命令就好，但是uni-app在build的时候，有一个问题。打包的时候，会出现一个dist目录，目录下会有一个打包的平台文件，因为uni-app是多平台的，所以这个文件对应的就是打包的这个平台。例如，我做的是h5项目，执行的命令中有 UNI_PLATFORM=h5 这一句，就会在

只有当 NODE_ENV = production，build的时候，会在 dist目录下生成一个 build 文件夹

当 NODE_ENV != production，build的时候，会在 dist目录下生成一个 dev 文件夹.

如果我打包的是h5项目，那就会在 build/dev 目录下生成一个h5的文件夹，文件夹内部就是打包好的文件，也就是运维要部署的文件。

但是运维部署的时候，一般都是一套的，只会取dist根目录下的文件，一般不会去内部找文件，除非你部署的时候，直接更改路径，改成你打包之后的路径，也就是 dist/dev/h5 或者是 dist/build/h5 ，但是这又出现问题了，我打正式包，和其他环节的包，最后的路径还是不一样的，那运维也是没法判断的，所以我们需要在打包之后，将打包的文件全部提取出来，直接丢到dist根目录下，然后删除掉打包出来的文件以及文件夹。

"build:m": "rm -rf ./dist/ && cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build && cp -r ./dist/build/h5/* ./dist/ && cp -r ./dist/build/h5/* ./dev/ && rm -rf ./dist/build",

这里用到了 linux 命令，意识就是

1、打包的时候先删除之前打包的dist文件夹以及内部文件

2、复制build/h5 ，或者 dev/h5 文件夹内部的文件，直接丢到 dist 目录下

3、然后删除 build文件夹以及内部文件或者 dev文件夹以及内部文件

其实我还有个想法，就是新增一个环境变量，用来区分环境，然后把所有的 NODE_ENV 全部设置为 production ，这样打包的时候，全部都是 dist/build/h5 这个目录，运维可以直接部署这个目录。

VUE_APP_ENV：用来区分环境 NODE_ENV：用来定死打包目录，只有 dist/build/xxx平台，没有dist/dev/xxx平台，因为是用的是vue-cli3的架子，所以环境变量需要使用 VUE_APP_ 开头

"build:h5-dev": "cross-env VUE_APP_ENV=development NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-test": "cross-env VUE_APP_ENV=test NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-pre": "cross-env VUE_APP_ENV=pre NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-pro": "cross-env VUE_APP_ENV=production  NODE_ENV=productionUNI_PLATFORM=h5 vue-cli-service uni-build",

或者打包的时候前端的npm脚本在改一下就好，只需要从 build/h5中取文件，dev/build 文件夹是不会被打包出来的，运维也只需要部署 dist/build/xxx

"build:m": "rm -rf ./dist/ && cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build && cp -r ./dist/build/h5/* ./dist/ &&  rm -rf ./dist/build",