During the development process of the project, we often encounter the problem of switching different IPs according to different environments. For example, when the project is deployed to the test server, it is necessary to replace the interface request IP with the IP of the test server. It is necessary to replace the interface request ip with the corresponding ip of the official server. Some companies have a pre-release environment, etc., so that the ip needs to be manually switched before each deployment of a project in a different environment, which is cumbersome and error-prone. This article records the detailed steps I took to solve this problem.
configuration steps
1. Create a new .env.xxx file in the root directory of the project
The default directory structure of the project created by vue scaffolding is as follows:
Add .env.xxx files in the root directory according to the number of environments
As above, the suffixes of the three .env.xxx files (the file suffixes can be customized) are development, production, and test, which can correspond to the development environment, production environment, and test environment, respectively. If you need a pre-release environment, you can continue to add a .env.pre file to represent the pre-release environment.
Variables that are loaded per environment
If you also need to set variables that need to be loaded in each environment, you can add the .env file, if not, you don't need to build this file. (That is, when the variable values of the variables corresponding to each environment are the same, the variables can be defined in the common .env file, and there is no need to repeatedly define this variable in the .env.xxx file corresponding to each environment)
2. Add variables to the .env.xxx file of the corresponding environment
In the .env.xxx file, only NODE_ENV, BASE_URL and variables starting with VUE_APP_ will be statically embedded into the client-side code through webpack.DefinePlugin.
- NODE_ENV : Mainly used to identify the current environment
- BASE_URL: matches the publicPath option in vue.config.js, which is the base path where your application will be deployed
- VUE_APP_* : custom variables
.env.development (development environment) file code
.env.production (production environment) file code
.env.test (test environment) file code
.env (variables loaded by all environments) file code
3. The package.json file configuration corresponds to the environment packaging command
The default configuration of the project created by vue scaffolding is as follows:
- vue-cli-service serve: The configuration default is the environment variable corresponding to the development environment used (of course, you can also manually specify the corresponding environment by yourself, just add --mode development after the existing command, complete command: vue-cli- service serve --mode development), that is to say, executing npm run serve will add the variables in the .env.development file and the .env file to the project code
- vue-cli-service build: The configuration default is to use the environment variables corresponding to the production environment, that is to say, to execute npm run build, the variables in the .env.production file and the .env file will be added to the project code
Add test service packaging command (run command: npm run build:test)
Add the following code to the scripts object in the package.json file:
vue-cli-service build --mode test : The test in the command corresponds to the value of the NODE_ENV variable set in the .env.xxx file. If the NODE_ENV variable is not set, the suffix of the .env.xxx file will prevail by default. If the .env.test file cannot be found, an error will be reported when packaging,
If you want to directly use the environment variables of the test server locally, you can also configure the project startup command in package.json, as follows (run command: npm run serve:test):
Or directly modify the operating mode of the existing serve:
How to use it in the project after configuration
- In the request js file, it can be used to replace the ip of the request interface to achieve the effect of requesting different ip according to different environments
- In the vue file, it can be used as a global variable, similar to the global constant defined in vue
- Used in the vue.config.js file, it can be used to judge the current packaging environment, and perform some packaging optimization configurations according to different environments
- Used in the index.html of vue-cli, it can be used to load some js, css and other header files uniformly defined by the company (respective js and css need to be introduced according to each environment)
1. Use in the js file/vue page of the request interface
语法：process.env.变量名称
2. In vue.config.js, the packaging environment is judged according to the environment variables, and the packaging optimization configuration is performed:
3. Use in index.html of vue-cli
Syntax: <%= variable name%> Load different css/js files in html according to different environments
//css文件
<link rel="stylesheet" href="<%= VUE_APP_API %>/header/head.css" rel="external nofollow" >
//js文件
<script type="text/javascript" src="<%= VUE_APP_API %>/footer.js"></script>
Load different local js codes in html according to different environments
<% if (process.env.NODE_ENV === 'production' ) { %>
<script>
window.test = 'xxxx'
</script>
<% } %>
