• Take a look at the vuE-CLI official environment variables and modes before setting them manually.

  • Usually, we only need one development environment to run the project, but we may need multiple environments to package (test environment, UAT environment, formal environment), so we need to add packages that support multiple environments, in fact, each environment corresponds to a configuration file.

  • Create a New Vue project Vue upgrade 3.x and create a project

vue create vue-webpack-test
Copy the code
  • After creation it looks like this:

  • Creating a Configuration File

    Create.env.development and.env.production files in the root directory. Env can be named as you like, but by default there are two types of environment (development and production). If you want to add more environments, manually create a new. Env file. Env.xxxx is whatever file you want, and XXX is whatever file name you want.

    Env. Dev,.env.pro,.env.dev1,.env.pro2.

    Json file and manually configure the configuration file we added.

  • Env. Development and. Env. Production

.env.development:

NODE_ENV = 'development'
VUE_APP_BASE_URL = 'http://www.baidu.com'
Copy the code

.env.development:

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://www.baidu.com'
Copy the code

VUE_APP_xxx is a fixed name in the file, and XXX can be named by itself.

  • Once the configuration file is set up, we need to gopackage.jsonfindscriptsAdd configuration:

The default looks like this:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
},
Copy the code

After adding the specified configuration file:

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production"
 },
Copy the code

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * Here you configure what to add –mode XXX.

Need to restart after configuration:

$ npm run serve
Copy the code

Process is a global attribute. Js and vue files can be used directly:

console.log(process, process.env. VUE_APP_BASE_URL)
Copy the code

The output looks like this:

When you print out the process object, you will find that the env is empty. It doesn’t matter. You can just go through process.env.xxx and use the configured properties.

Of course, you can add as many custom environment attributes as you want to use for various scenarios, as long as the format is VUE_APP_xxx

Of course, there are other attributes as well: outputDir output directory name when packaging, the default is dist

VUE_APP_BASE_URL is fine if it can be used elsewhere, but some attributes may be configured differently for different environments, such as the outputDir output file on. Then you can configure it in vue.config.js:

Js module.exports = {// outputDir: process.env.outputdir... The same goes for other attributes, depending on where you are configured to use them. }Copy the code
  • Configure AXIOS with environment variables
BaseURL: process.env.vue_app_url // Configure the AXIos request server addressCopy the code

Axios will then fetch the VUE_APP_BASE_URL from your environment configuration file.