1, the preface

Env files to store global environment variables, as well as vUE startup and package commands for project development.

2. the role of the.env file

invueIn the project,envIs a global configuration file that can store variables in different environments. usevue-cliScaffolding projects, one is created in the root directory by default.envFile, if you need more types.envThe file needs to be created by yourself.

Among them:

Env files are the global default configuration files and will be loaded and merged regardless of the environment.

2,.env.development is a configuration file in the development environment, loaded only in the development environment.

3,.env.production is a production configuration file (that is, the formal environment) that is only loaded in production.

Env.test (test environment), or. Env.bata (internal test version), etc.

3. Configure the. Env file

Variable names must start with VUE_APP_, such as VUE_APP_URL, VUE_APP_PWD

4. Configure the startup command

In the vue project root directory, locate the package.json file, where the scripts object is the configured Vue startup command, such as NPM run dev, configured as follows:

  "scripts": {
    "serve": "vue-cli-service serve"."serve-test": "vue-cli-service serve --mode test"."build": "vue-cli-service build"."test": "vue-cli-service build --mode test"."all": "vue-cli-service build && vue-cli-service build --mode test"
  }
Copy the code

Each line is explained as follows:

1, NPM run serve, start the project and load the. Env and. Env. development files

2, NPM run serve-test, start the project, and load. Env and. Env. test files

NPM run build, where. Env and. Env. Production files are loaded

4, NPM run test, test environment package, where. Env and. Env. test files will be loaded

5, NPM run all, production environment and test environment package at the same time, load different. Env files

5. Get global variables in. Env

For example, if I set VUE_APP_BASE_URL = ‘https://www.baidu.com’ in the. Env file, and I want to get it in the project, I just need to use process.env.vue_app_base_url to get it.

5. Practical use

In my view, the most useful is to load different variables in different environments, such as the development environment and test environment, formal environment request domain name is different, directly in the. Env file to define a global URL, used in the request encapsulation, very convenient.

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

  • Use NVM to manage node.js version and change NPM Taobao image source
  • Enumerative JS practical and powerful operator & operator
  • Wechat small program to achieve search keyword highlighting
  • Request encapsulation of wechat applets
  • The use of try and catch in javaScript and breaking out of forEach loops

Personal home page

  • CSDN
  • GitHub
  • Jane’s book
  • Blog garden
  • The Denver nuggets