不同环境配置

Profile Configuration

前端环境

nodejs默认环境有两个:development和production,你会发现在真实项目中,只有这两个环境是完全不够的。

笔者认为前端的项目都应该有以下五个环境:

本地环境(local,用于本地开发,连接本地api)
开发环境(dev,用于本地开发,连接开发环境的api)
测试环境(sit,测试人员测试)
预发布环境(pre, 真实的数据,最真实的生产环境)
生产环境(prod, 生产环境)

具体讲解

local环境

很少有项目关注这个环境,希望能仔细阅读,会对你有很大的帮助。

有那么两群人:
1 纯前端,不会后端,但在对接api的时候,喜欢把后端代码pull下来,在本地运行,然后连接本地的api.
2 全栈开发者,他们即开发前端页面,又写后端api接口

讲到这里相信大家应该都懂了local的环境的样子了,就是连接的本地的api地址

local环境配置文件:
.env.local文件

NODE_ENV=development VUE_APP_TYPE=dev VUE_APP_URL=http://127.0.0.1:10086/smart-admin-api/ VUE_APP_SOCKET_URL=ws://127.0.0.1:10086/smart-admin-api/

启动:
npm run local

dev环境

有一群前端开发者,愿意像上面那两种人麻烦,他们坐等后端的api接口,那么就只能连接后端dev环境的地址了,所以有了:

dev环境配置文件:
.env.dev文件

NODE_ENV=development VUE_APP_TYPE=dev VUE_APP_URL=http://172.16.0.145:10086/smart-admin-api/ VUE_APP_SOCKET_URL=ws://172.16.0.145:10086/smart-admin-api/

启动
npm run dev

sit,pre,prod环境

测试、预发布、生产环境,这三个环境不多说了,大家都懂的
package.json

"scripts": { "local": "vue-cli-service serve --open --mode local", "dev": "vue-cli-service serve --open --mode dev", "sit": "vue-cli-service build --mode sit", "pre": "vue-cli-service build --mode pre", "prod": "vue-cli-service build --mode prod" },

作者简介:
卓大, 1024创新实验室主任,混迹于各个技术,熟悉点java,略懂点前端。