How to distinguish different environments in vue

How to distinguish between different environments

In vue development, we often have to distinguish different variables according to different environments. There are several common environments:

Production environment: production,
Development environment: development,
Test environment: test.

Method 1: Manually modify different variables

const BASE_URL = '/dev'
const BASE_NAME = 'coder'
// const BASE_URL = '/prod'
// const BASE_NAME = 'kobe'
// const BASE_URL = '/test'
// const BASE_NAME = 'james'
export { BASE_URL, BASE_NAME }

When we are in any environment, we will cancel the comments of what variables. This is too tedious and unsafe. If we forget that when we are in a production environment and we are using variables in the development environment, it will cause insecurity.

Method 2: Use .NODE_ENV to distinguish

let BASE_URL = ''
let BASE_NAME = ''
if (.NODE_ENV === 'production') {
  BASE_URL = '/prod'
  BASE_NAME = 'dmc'
} else if (.NODE_ENV === 'development') {
  BASE_URL = '/deve'
  BASE_NAME = 'dl'
} else {
  BASE_URL = '/test'
  BASE_NAME = 'dlfordmc'
}
export { BASE_NAME, BASE_URL }

Method 3: Write different environment variable configuration files

There are three files that need to be written in the root directory:

VUE_APP_BASE_URL=/devepment
VUE_APP_BASE_NAME=devepmemt

VUE_APP_BASE_URL=/production
VUE_APP_BASE_NAME=production

VUE_APP_BASE_URL=/test
VUE_APP_BASE_NAME=test

When visiting other places

  (.VUE_APP_BASE_URL)   ///devepment
  (.VUE_APP_BASE_NAME)  //devepmemt

Note: VUE_APP must be added at this time, and it needs to be added during access.

vue configuration different environments

Official website learning:/zh/guide/#%E6%A8%A1%E5%BC%8F

If the project has 4 environments: development, production, testing, and others

The following files need to be configured

Vue scaffolding has 2 environments by default, development and production, development in the local environment, release to the production environment, and configuration as follows

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/"
  },

If it becomes 4 environments, 1 locally developed, and 3 can publish tests.

First of all, we need to think clearly about what we need.

① Local development is required and packaged to different environments for testing and release;

② It is still different environments during development, and packaging is also different environments

If it's the first

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/",
    //Use this    "build--dev": "cross-env NODE_ENV=production env_config=dev node build/",
    "build--test": "cross-env NODE_ENV=production env_config=test node build/",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/"
    //or use this vue3.0    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },

If it's the second

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "production": "vue-cli-service serve --mode production" ,
    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },

The above is personal experience. I hope you can give you a reference and I hope you can support me more.