一条命令实现自动部署

日常开发中，常常会需要频繁部署测试环境，灰度环境等等。本文借助surge,以及一条命令，实在自动化的打包部署，减少手动部署。如果你所在的公司已经有成熟的devOps，例如Jenkins，可以跳过该文章

在vue中使用环境变量

由于我的H5项目中涉及到支付，因此就会存在一个环境的问题。例如在测试的时候如果你用正式的支付key,就必须真的付钱，这样实在他麻烦，还得报销。

在vue2 中，有很多办法可以设置环境变量，我建议还是使用cross-env

因此，我们先安装，此时可以全局或者安装到dev-dep中 npm i cross-env -D

使用的时候在package.json中修改一下命令,将cross-env放到最前

scripts": {
  "start": "cross-env VUE_APP_ENV=production vue-cli-service serve",
  "serve": "cross-env VUE_APP_ENV=sandbox  vue-cli-service serve",
  "build": "cross-env VUE_APP_ENV=production  vue-cli-service build --modren",
  "build:test":"cross-env VUE_APP_ENV=sandbox  vue-cli-service build --modren"
}

这里有个小知识点，如果你希望这个变量能在vue2中访问，你需要以VUE_APP_开头，并且全部大写。具体可以参考这里

这样，在你代码中你就可以直接写

if(process.env.VUE_APP_ENV === 'sandbox'){
 // 支付是测试时
} else {
 // 支付是正式时
}

这样做的好处是不再需要手动修改代码，能保证每次打包的正确性，不会出现应该是正式支付时，代码里却是测试环境。(不要问我为什么！！！)

注册surge

surge 是一个免费的静态站点空间，可以部署静态网页，其实就是vue打包后的dist文件夹，不支持ssr

Surge官网

首先安装，这次必须全局安装了 npm i surge -g

然后你需要在终端中，注册或登录账户。直接打开，输入surge login，就会提示你注册或登录，注册也十分简单，只需要邮箱密码

它有如下命令，常用也就是teardown,就是删除

缺点：其实surge这个服务挺好的，但可惜被某些烂人玩坏了，因此这个域名不能通过微信分享，在某些app中也处于黑名单状态,但是正常访问时没问题的。
优点:自带https证书，空间流量基本够用

一条命令

现在看看咱们修改过的命令，这里面已经区分了正式和测试,我们在package.json里新增一条部署命令

scripts": {
  "start": "cross-env VUE_APP_ENV=production vue-cli-service serve",
  "serve": "cross-env VUE_APP_ENV=sandbox  vue-cli-service serve",
  "build": "cross-env VUE_APP_ENV=production  vue-cli-service build --modren",
  "build:test":"cross-env VUE_APP_ENV=sandbox  vue-cli-service build --modren",
  "deploy:test":"npm run build:test && surge teardown xxxx.surge.sh && surge ./dist xxxx.surge.sh"
  }

这样一条命令就可以实现自动部署了，其中xxxx.surge.sh是你自己指定的二级域名，可以随便填，如果重复就会报错。

还有第一次使用这个命令的时候，先部署一遍，就是直接surge ./dist xxxx.surge.sh,你要先部署才能删除嘛

如果你所处于小型团队，其实可以几个人共用一个surge 账号，这样每个人都可以自由部署和使用

FAQ

1、部署失败

这个提示是说你选这个域名已经被别人用了，换一个就行，比如love6,love99这种

2、 Aborted - Unable to remove xxx.surge.sh.

这个一般是因为这个域名还没部署，或者不是你申请的，才会导致删除失败

3、如果查询我部署过的域名 surge list

4、查询登录的账户surge whoami