项目上线发版的流程 前端要做什么?
1.目标
项目发版过程中，前端参与的工作微乎其微，主要是运维或后端来做。但很多前端小伙伴不知道整个发版流程是什么样子的,这里给大家稍微普及一下,
2.不同分支对应不同的环境
公司开发项目时，一般分为三到四个环境，不同的环境往往对应不同的项目分支
- 开发环境（feature_xxx）
- 测试环境 (dev)
- 预发布环境 (pre_prod)【预发布环境，不一定有，取决于公司。预发布环境就是公网的一个测试环境】
- 生产环境（正式环境master）
注意：
- 这几个分支名字不是固定的。不同的公司起的名字可能不一样
- 以上提到的几个分支名，一般不用来写代码，只能进行代码合并和发布项目使用
3.发布项目前 前端需要做的准备
我们知道每个环境看到的数据是不一样的，说白了 每个环境请求的接口地址是不一样的。所以在发布项目前一定先把每个环境的接口地址配置好
3.1 配置环境变量
.env.development
VUE_APP_BASE_URL = '开发环境的接口地址'
.env.staging
VUE_APP_BASE_URL = '测试环境的接口地址'
.env.preproduction
VUE_APP_BASE_URL = '预发布环境的接口地址'
.env.production
VUE_APP_BASE_URL = '生产环境的接口地址'
3.2配置package.json读取不同的环境变量文件
package.json
注意：
--mode 参数的意思时，打包时读取哪个环境变量文件
scripts下的serve和build命令 可以省略 --mode 参数，因为这两个命令会自动读取 .env.development 和 .env.production 这两个环境变量文件
3.3配置axios的基地址
环境变量已经配置好了，在发送ajax请求时，也要动态的去读取不同的接口地址
通过 process.env.VUE_APP_BASE_URL (不同的项目读取环境变量的语法是不一样的，这里只侧重于流程，不侧重与语法)
utils/request.js
配置完成后：
当你处于开发环境时，执行 npm run serve 读取的环境变量文件是.env.development,这样读取的接口地址就是 开发环境的接口地址
当你处于测试环境时，执行npm run test 读取的环境变量文件是.env.staging,这样读取的接口地址就是测试环境的接口地址
...
3.4配置webpack打包的输出目录
把publicPath改成相对目录，这样上线时，不管后端把前端项目放到服务器的哪个目录下都不会有问题
./相对路径查找资源
/绝对路径查找资源
4.发布上线
发布上线 又有两种发布方式 手动发布 （不常用，需要了解） 和 自动发布（常用）
区别：手动发布和自动发布的区别就是 前端打包是手动和自动的区分
4.1手动发布
- 前端要明确 要发布的环境是哪个环境
- 切换到对应的分支，进行代码合并，合并完成后提交到仓库
- 执行package.json中配置好的打包命令
- 产生的dist文件夹 发给运维，由运维上线
4.2自动发布
公司一般都有搭建好的自动发布环境，常用的有jenkins和k8s,这两种工具都是用来自动化部署项目的
前提：要想自动化部署项目，前端需要把package.json中配置的各个环境的打包命令以及分支告诉运维，他们需要配置
流程：
- 前端要明确 要发布的环境是哪个环境
- 切换到对应的分支，进行代码合并，合并完成后提交到仓库
- 运维或后端进行一键发布
七、项目上线后的路由模式
Vue项目支持两种路由模式 hash 和 history
上线时一般都会切换成 history模式 ，因为这种路径比较好看
注意： 如果切换成history模式的话，后端一定需要进行对应的配置，否则会出现刷新404的情况
后端解决方案 HTML5 history模式