preface

For those of you who have used vueCli development projects, there are three interface environments (development, test and formal) in normal development, but vueCli only provides two modes of development and production(excluding test-single test). In fact, this is caused by people not understanding the vueCli document.

In vueCli –mode corresponds to.env.[mode], not NODE_ENV

::: tip Note the exception of the VUE_APP_ variable. There are also two special variables: NODE_ENV: one of development, production, and test. The value depends on the mode in which the application is running. BASE_URL: corresponds to the publicPath option in vue.config.js, the base path to which your application will be deployed. : : :

Profile – Official

Mode is an important concept in the Vue CLI project. By default, a Vue CLI project has three modes:

  • Development mode Used for vue-CLI-service serve
  • The test mode is used for vue-cli-service test:unit
  • Production mode Is used for vue-cli-service build and vue-cli-service test: e2E

You can override the default mode for the command line by passing the –mode option argument.

When the vue-cli-service command is run, all environment variables are loaded from the corresponding environment file. If the file does not contain the NODE_ENV variable internally, its value will depend on the mode, for example, set to “production” in production mode, “test” in test mode, and “development” by default.

NODE_ENV determines the mode in which your application runs, whether it is development, production, or test, and therefore which WebPack configuration to create.

For example, by setting NODE_ENV to “test”, the Vue CLI creates a webpack configuration optimized for unit testing that does not handle images and other resources that are not necessary for unit testing.

Similarly, NODE_ENV=development creates a Webpack configuration that enables hot updates, does not hash resources and does not export vendor bundles, in order to quickly rebuild at development time.

When you run vue-cli-service build, regardless of which environment you are deploying to, you should always set NODE_ENV to “production” to get the applications available for deployment.

Sample configuration

We now have three configuration files, as follows

#.env.development
NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://xxxx
Copy the code
#.env.preview tests the configuration of the environment
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx
Copy the code
#.env.production
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx
Copy the code

Used in Axios

import axios from "axios";
const conf = {
  baseURL: process.env.VUE_APP_AXIOS_BASEURL,
};
return axios.create(conf);
Copy the code

Package. The json configuration

{
  "scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build --mode preview"."build:release": "vue-cli-service build"}}Copy the code

Start the way

npm run serve # the default dev
npm run build # Test environment
npm run build:release # Formal environment
Copy the code