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
- Root directory creation
.env.development
,.env.test
,.env.production
Documentation (development, testing, production)
- 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 environmentVUE_APP_MODE
: Online test environmentVUE_APP_API_URL
: API call addressoutputDir
: 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
- Modify the
vue.config.js
Package input directory in
- Modify the
package.json
file
"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
- Modify our own payment interface file
- packaging
runnpm run test
ornpm run publish
test
It’s for the test environment,dist
It’s the production environment.
7. Explain again why it is usedprocess.env.VUE_APP_MODE
To judge, not to useprocess.env.NODE_ENV
If we are in.env.test
File theNODE_ENV
Set totest
If so, the packaged directory structure is different, as shown in the following figure
case
Github_demo: github.com/ynzy/vue_en…