不同环境配置

9/7/2021

# 前端环境

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

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

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

# 具体讲解

# 1)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/
1
2
3
4

启动: npm run local

# 2)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/
1
2
3
4

启动 npm run dev

# 3)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"
  },
1
2
3
4
5
6
7

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

加“卓大”微信,入群 关注 1024创新实验室! 我要请 1024创新实验室 喝胡辣汤~