One, the difference between the three
usually. We will create three files of .env .env.development .env.production in the root directory:
.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件
Second, a simple example of the use of environment variables.
It should be noted that the attribute name in the configuration file must start with VUE_APP_, and the
content of the .env file:
VUE_APP_testName = '无论开发还是生产环境都会执行的内容'
.env.development file content:
VUE_APP_testName = '测试环境下内容'
The contents of the .env.production file
VUE_APP_testName = '生产环境下的内容'
First of all, Vueat startup, whether it is in the development environment or in the production environment, it will always load .envthe contents of the file, then =>根据Node环境变量'NODE_ENV'的值来选择加载'development'还是'production'
Third, what is the node environment variable, and why can it be used to determine whether to load development or production?
This starts with the node's global variable process.
If you don't know what the global variables of node are? Just think about another global variable global of node. It is also an object, which contains:
__dirname: 当前文件所在文件夹的绝对路径
__filename: 当前文件的绝对路径
setInterval / clearInterval : 和浏览器中window对象上的定时器一样
setTimeout / clearTimeout : 和浏览器中window对象上的定时器一样
console : 和浏览器中window对象上的打印函数一样
With such a series of attributes, you will be more familiar with it! !
The first point:
In node, the global variable process represents the current node process. process.env contains information about the system environment.
In other words, process is a global variable that has been created at the bottom of the node operating environment, which stores configuration information related to the node environment. Assuming that a js code is run locally with node, the process can be printed directly.
This is not printed in the browser console, because it is the browser environment, not the node environment. There is a difference between the two.
The second point: what is process.env.NODE_ENV?
But NODE_ENV does not exist in process.env. NODE_ENV is a user-defined variable, and its purpose in webpack is to judge the production environment, development environment, or test environment.
In other words, a property named NODE_ENV has been configured for the process.env object in webpack. And use this attribute to determine whether it is a production environment or a development environment or a test environment
Back to the previous topic.
When we usually npm run servestart, the environment variable NODE_ENVvalue of our local system will be set to yes by default by webpack development.
At this time, we print it in the project such as main.js:
console.log(process.env.NODE_ENV)
And when we execute npm run serve, it will execute .env first and then execute the two files .env.development.
Secondly, when loading files in order, the Vuecontent of the next loaded file will be compared with the content of the previously loaded file. If there are variables with the same name, then it will 采用后一个文件里的变量值为变量的最终值. (That is, the variable assignment before the overwrite performed later)
Look at the three files previously configured. If this project has been run with npm run serve, print this variable directly in main.js:
And when we package it to the server (npm run build), the NODE_ENVvalue of the server is generally production, then Vue will still load the .envfile first , and then load the .env.productionfile.
That is to print at this time:
console.log(process.env.NODE_ENV) //production