Guide to using env in vue cli

Preface

I believe that those who have used vueCli to develop projects are a bit depressed. During normal development, there are three interface environments (development, test, and formal), but vueCli only provides two development and production (excluding test-single test) modes. In fact, this is caused by the friends not understanding the vueCli documentation.

In the vueCli command, --mode corresponds to .env.[mode] instead of NODE_ENV

Notice

In addition to the VUE_APP_ variables.

There are two special variables:

• NODE_ENV: is one of development, production, and test. Its value depends on the mode in which the application is running.
• BASE_URL: This matches the publicPath option in vue.config.js, which is the base path where your application will be deployed.

Introduction-Official

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

• development mode is used for vue-cli-service serve
• 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 by passing the --mode option argument to the command line.

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

NODE_ENV will determine the mode your app runs in, whether it is development, production or testing, and therefore also determines which webpack configuration is created.

For example, by setting NODE_ENV to "test", Vue CLI will create an optimized webpack configuration designed for unit testing that does not process images and other resources that are not necessary for unit testing.

Similarly, NODE_ENV=development creates a webpack configuration that enables hot-loading, does not hash assets, and does not generate vendor bundles, in order to allow for quick rebuilds during development.

When you run the vue-cli-service build command, you should always set NODE_ENV to "production" to get a deployable application, no matter which environment you deploy to.

Example Configuration

We now have three configuration files, as follows

#.env.development
NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.preview Test environment configuration NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.production
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx

Use in axios

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

package.json configuration

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode preview",
    "build:release": "vue-cli-service build"
  }
}

Startup method

npm run serve #Default dev
npm run build #Test environment npm run build:release #Formal environment

This is the end of this article about the usage guide of env in vue cli. For more relevant vue cli env content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!