In daily development, it is often necessary to frequently deploy test environment, gray environment and so on. This article uses surge and a single command to automate packaged deployment and reduce manual deployment. If your company already has mature devOps, such as Jenkins, skip this article

Use environment variables in VUE

Since payment is involved in my H5 project, there is an environmental issue. For example, in the test, if you use the formal payment key, you must actually pay, which is really troublesome to him, but also have to reimburse.

There are many ways to set environment variables in VUe2, and I recommend sticking with cross-env

Therefore, we install NPM I cross-env-d first, which can be installed globally or in dev-dep

When used, modify the command in package.json to put cross-env first

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"
}
Copy the code

Here’s a quick tip: if you want this variable to be accessible in vue2, you need to start with VUE_APP_, all caps. For details, please refer to here

That way, in your code you can write directly

If (process.env.vue_app_env === 'sandbox'){// Pay is test} else {// Pay is formal}Copy the code

This has the advantage of eliminating the need to manually modify the code, ensuring that every time a package is packaged correctly, it does not occur when the code is in a test environment when it should be a formal payment. (Don’t ask me why!!)

Registration of the firm

Surge is a free static site space that allows you to deploy static web pages, which are essentially vUE packaged Dist folders without SSR support

The firm’s website

Install first, this time you must install NPM I surge -g globally

And then you need to register or log into an account on the terminal. Open it, type surge login, and you’ll be prompted to sign up or login. Registering is as simple as your email password

It has the following command, which is often called teardown, which is delete

  • The bad: The surge service is great, but it’s broken by some bad people, so the domain can’t be shared via wechat and is blacklisted in some apps, but it works when accessed normally.

  • Advantages: The HTTPS certificate provides sufficient space traffic

A command

Now look at our modified command, which distinguishes between formal and test, and add a deployment command to 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"
  }
Copy the code

In this command, xxxx.surge. Sh is the secondary domain name specified by you. You can enter it freely.

Surge./dist XXXX.surge. Sh (surge. Dist XXXX.surge

If you’re on a small team, you can actually share a Surge account with several people, so everyone can deploy and use it freely

FAQ

1. The deployment fails

You choose this domain name has been used by others, change a line, such as love6,love99 this kind

Aborted – Unable to remove xxx.surge. Sh.

This is usually because the domain name is not deployed, or not your application, will lead to deletion failure

3. Query the surge List domain name that I have deployed

4. Query the surge whoami account