+-
关于前端项目部署

不知道哪位大佬搞过前端部署的一包到底

大概意思就是:
我们在构建项目的时候只打一个包,不用通过命令行来区分环境然后加载不同的配置,我们公司后端开发是通过启动命令来区分环境的,不知道我们前端有没有啥比较好的思路。

目前我能想到的只有根据域名来区分。。

前端上传源码,由后端来来构建,我们公司之前就是这样的。 后端的自动化部署里面会配合前端package里设置的模式来构建。
比如后端部署dev环境,那就是 vue-cli-service build --mode dev
测试环境 vue-cli-service build --mode test

我觉得只打一个包的话,如果运行环境只有域名不一样那就只能根据域名来区分了
如果可以多包的可以试下这样
通过打包命令打包不同的配置打包多个包,比如
npm run build --product1 、 npm run build --product2
通过下面的步骤就是获取命令行参数(product1、product2),从而打包不同配置的包

let params = ''; let argvs; try { argvs = JSON.parse(process.env.npm_config_argv).original; } catch (ex) { argvs = process.argv;//返回命令脚本中各个参数所组成的数组 } let argv = argvs.slice(2); for (let i in argv) { params = argv[i].match(/--(\S*)/)[1]; }

后端可以通过启动命令区分是生产还是测试。那么后端应该是会有2个接口。
假设:

prod环境地址www.pro.com
dev环境地址www.dev.com

前端可以采用nginx代理来区分。

项目中所有的接口都不带域名来请求
比如前端的生产环境访问地址为www.xxxxxx.com
那么生产环境代理到www.pro.com

dev环境可以根据location或者端口来划分
如:

www.xxxxxx.com:8899 www.xxxxxx.com/dev

接口测试环境代理到www.dev.com