项目上线发版的流程 前端要做什么?_项目上线的时候前端要做啥

1.目标

项目发版过程中，前端参与的工作微乎其微，主要是运维或后端来做。但很多前端小伙伴不知道整个发版流程是什么样子的,这里给大家稍微普及一下,

2.不同分支对应不同的环境

公司开发项目时，一般分为三到四个环境，不同的环境往往对应不同的项目分支

• 开发环境（feature_xxx）

• 测试环境 (dev)

• 预发布环境 (pre_prod)【预发布环境，不一定有，取决于公司。预发布环境就是公网的一个测试环境】

• 生产环境（正式环境master）

注意：

1. 这几个分支名字不是固定的。不同的公司起的名字可能不一样
2. 以上提到的几个分支名，一般不用来写代码，只能进行代码合并和发布项目使用

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手动发布

1. 前端要明确 要发布的环境是哪个环境
2. 切换到对应的分支，进行代码合并，合并完成后提交到仓库
3. 执行package.json中配置好的打包命令
4. 产生的dist文件夹 发给运维，由运维上线

4.2自动发布

公司一般都有搭建好的自动发布环境，常用的有jenkins和k8s,这两种工具都是用来自动化部署项目的

前提：要想自动化部署项目，前端需要把package.json中配置的各个环境的打包命令以及分支告诉运维，他们需要配置

流程：

1. 前端要明确 要发布的环境是哪个环境
2. 切换到对应的分支，进行代码合并，合并完成后提交到仓库
3. 运维或后端进行一键发布

七、项目上线后的路由模式

Vue项目支持两种路由模式 hash 和 history

上线时一般都会切换成 history模式 ，因为这种路径比较好看

注意： 如果切换成history模式的话，后端一定需要进行对应的配置，否则会出现刷新404的情况

后端解决方案 HTML5 history模式