Main functions:

  1. The main function of packaging by environment is the difference of packaging configuration in different environments

  2. In general, two or more domain names correspond to different servers. Context variables are used to dynamically configure domain names

  3. Other links, pictures, addresses, etc. that need to be changed according to the environment

  4. Vue-cli has done 99% of the configuration for us, we just need to use it

  • 1. Configure the. Env file in the project root directory

Pre and Test represent two test environments respectively. Development environment and production environment already exist by default

  • 2. Configure environment variables

The format of key-value pairs, the keys are fixed

Vue – cli words:

Note that only NODE_ENV, BASE_URL, and variables starting with VUE_APP_ will be statically embedded in the client-side code via webpack.defineplugin. This is to avoid accidentally exposing a private key on the machine that might have the same name.

I don’t know what it means, but I’ll just use a.env.pre file

  • 3. The configuration package. Json

The –mode option takes the command line override default mode, which is the mode to package, and corresponds to the environment file above

  • 4. You can create vue.config.js in the root directory to set the desired configuration

We can print the current environment in app.vue and package the command NPM run dev

created() {
   console.log('Current Environment',process.env.NODE_ENV)  // Current environment development
 }
Copy the code

Package command: NPM run test

created() {
  console.log('Current Environment',process.env.NODE_ENV)  // Current environment test
}
Copy the code
  • Without a server, how to simulate the test environment running locally – install the live-serve plugin
npm i live-server -S
Copy the code

Find the package.json file in your project and modify scripts

After packaging, run the live-server command under the generated dist directory

  • 5. Configure the dynamic domain name

Create a file

Determine the domain name and export baseurls.js

Configuration axios axios – config. Js

Now you can send the request and you can dynamically switch the domain name based on the environment and encapsulate the route, encapsulate axios and configure it, and basically the project comes in!