This is the first article I participated in beginners’ introduction

Scenario Description:

The payment function is called in several places in the project. In the development environment and test environment, the payment amount needs to be changed to 1 cent, while in the production environment, it is the real amount. The payment interface is uniformly encapsulated, and it only needs to determine whether it is the development environment or the production environment before calling. Then you need to use environment variables and document the process of resolution.

To solve the problem

Please read the official documentation briefly to understand the concept

  1. Root directory creation.env.development,.env.test,.env.productionDocumentation (development, testing, production)

  1. File contents and field description
  • NODE_ENV: can be set to another value, such as “test”, but the packaged directory structure is not the same as “production”, so set it to “production”, using the “VUE_APP_MODE” variable to distinguish the environment
  • VUE_APP_MODE: Online test environment
  • VUE_APP_API_URL: API call address
  • outputDir: Folder name generated by packaging, default is ‘dist’

. The env. The content of the development

= 'development' = 'development' NODE_ENV VUE_APP_MODE VUE_APP_API_URL = 'http://192.168.1.33:8008/api/'Copy the code

. The env. The test content

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test
Copy the code

. The env. The content of production

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
Copy the code
  1. Modify thevue.config.jsPackage input directory in

  1. Modify thepackage.jsonfile
"Test ": "vue-cli-service build --mode test",// "publish": "Vue-cli-service build && vue-cli-service build --mode test",// Test and production are packaged togetherCopy the code
  1. Modify our own payment interface file

  1. packaging

runnpm run testornpm run publish testIt’s for the test environment,distIt’s the production environment.

7. Explain again why it is usedprocess.env.VUE_APP_MODETo judge, not to useprocess.env.NODE_ENVIf we are in.env.testFile theNODE_ENVSet totestIf so, the packaged directory structure is different, as shown in the following figure

case

Github_demo: github.com/ynzy/vue_en…