Base address environment variable settings

Operating environment instructions and packaging notes

• First of all, we need to figure out that environment variables refer to the base address changes when the code is running in different environments. The instructions of the code when running in different environments can be viewed in the configuration file package.json

• • The one with serve is the running command in the development environment
  • The ones with build are the running instructions in the production environment--the premise is to package them well

• What to pay attention to when packaging --- Go to the configuration file vue.config.js to modify the public path publicPath to: publicPath: './' --- This will prevent the packaged file from being unable to send requests and get it after running Path error such as image

How to set different base addresses in different environments?

• The first step is to change the base address in request.js to baseURL: process.env.VUE_APP_URL ---- This is his calling method

const _axios = axios.create({ 
 //Set the base address to be dynamic and call the base URL in different .env files according to different environments 
  : process.env.VUE_APP_URL 
})

• The second step is to go to .env.development to set up a

  

  ----This is the base address of the development environment

• • If there is no .env.development file then create one

• The third step is to go to the .env.production file to set the base address of the production environment (that is, the environment when it goes online), and name it VUE_APP_URL as above: = base address of the production environment

• • If there is none, create one

• important point! !

• • One: The base address of the development environment must be written in .env.development
  • Two: The base address of the production environment must be written in .env.production
  • Three: baseURL: The VUE_APP_UR in process.env.VUE_APP_URL must be consistent with the VUE_APP_URL stored in the base address in the .env file
  • Four : If you want to see what development environment you are in, you can set VUE_APP_TITLE in the .env file (TITLE can be named casually) = 'What environment am I', and then go to the component and save it in data first, for example: title: process.env. VUE_APP_URL first assigns him a value and then uses the interpolation syntax { { title }} to view in html

How to create a test environment (custom environment)?

• First create a file ---> .env.xxx (name it casually), write in this file: VUE_APP_URL: = test environment base address
• The second step is to add a running command example of our test environment to the configuration file package.json: ----> "build:xxx": "vue-cli-service build --mode xxx", input when running npm run build:xxx will do, the running command can be changed at will