十三.构建部署

前言

前端开发也需要懂一些基本部署知识，确认已发布，测试是否成功发布本次项目代码

1.代码提交

在 vscode 中安装代码提交工具GitLens插件

常用功能
- 代码合并提交
- 创建分支、切换分支
- 临时存储

参考教程

2.部署前

注意

有时候部署比较敏感，如上紧急上 uat 环境，为了防止出意外导致投诉（如测试）或者确定前端代码部署质量排查部署产生的问题，可以先在本地安装 nginx 模拟线上环境，校验前端打包后的代码是否是正常的，自己确定修改无误后再部署

1.本地配置 nginx

windows 环境中下载 nginx，然后在安装目录下解压
在 Nginx 的目录下使用 cmd 命令行，启动之后，打开http://localhost:80就能看的效果
sh
```
start nginx           # 启动
```
1

常见命令

start nginx           # 启动
nginx -s stop         # 快速停止（不保存相关信息）
nginx -s quit         # 有序停止（保存相关信息）
nginx -s reload       # 重启（修改配置文件后用这个）

2.打包项目代码，配置 nginx 指向打包目录

npm run build

# nginx/conf/nginx.conf
...
location /[项目二级目录] {
  root D:/project/[项目名称]
  try_fiels $uri $uri/ /[打包目录]/index.html
  index index.html index.htm
}
...

3.本地重启 nginx，验证打包代码（在安装根目录下启用 cmd）
sh
```
nginx -s reload       # 重启
```
1

3.部署中

方式一：直接上传本地打包后的代码到服务器
sh
```
npm run build:sit
```
1
通过 ftp 等工具将 dist 目录下的打包文件传输到服务器指定目录（服务器上需先启动 nginx）
方式二：通过相关工具部署流水线

4.部署后

注意

有时候部署后需要查看代码是否更新，作出相关动作（刷新页面）

在 public 下建立文件，/version.json（打包时 webpack 向此文件写入打包信息）

json

{
  "projectName": "xxx",
  "version": "xxx1.13",
  "date": "2021/12/19",
  "time": "123"
}

刷新页面

// main.js
setTimeout(() => {
  axios.get("/version.json").then((res) => {
    if (res.data.time !== localStorage.time) {
      localStorage.time = res.data.time
      message("项目有更新,10s后自动刷新页面")
    }
  })
}, 10000)

可能遇到的问题

linux 下有权限问题，如配置完成后访问出现 403,可以配置 SELINUX=disabled 解决

总结

通过对vue项目构建部署的了解，可以看到前端也需要学习一些构建部署知识，能在日常开发中轻松处理相关问题

十三.构建部署 ​

1.代码提交 ​

2.部署前 ​

3.部署中 ​

4.部署后 ​

十三.构建部署

1.代码提交

2.部署前

3.部署中

4.部署后