前端手动部署

前端手动发版流程

1. 本地开发与打包：
   • 前端开发人员在本地开发环境中编写和测试代码。
   • 当代码开发完成后，使用如npm run build或yarn build等命令，通过前端项目的构建脚本（通常是Webpack、Rollup等）打包前端代码。
   • 打包过程会生成优化后的静态资源文件，通常包括HTML、CSS、JavaScript等，这些文件被放置在项目的dist或build目录下。
2. 配置Nginx：
   • 前端开发人员或系统管理员需要配置Nginx作为静态资源服务器。
   • 在Nginx的配置文件（通常是nginx.conf或某个站点特定的配置文件）中，指定静态资源文件的根目录为前端项目的dist或build目录。
   • 配置Nginx监听特定的端口（如80或443），并设置相应的访问规则，如域名、SSL证书等。
3. 启动Nginx服务：
   • 根据操作系统和Nginx安装方式的不同，使用相应的命令启动Nginx服务。
   • Nginx开始监听配置的端口，并等待客户端的请求。
4. 部署静态资源：
   • 将打包生成的静态资源文件（位于dist或build目录）部署到Nginx配置的根目录下。
   • 这可以通过手动复制文件或使用自动化工具（如FTP客户端、SCP、rsync等）完成。
5. 访问静态资源：
   • 当用户通过浏览器访问配置好的域名或IP地址时，Nginx会拦截请求，并根据配置提供相应的静态资源文件。
   • 浏览器接收到这些文件后，会解析并渲染页面，从而展示前端应用。
6. 更新与发版：
   • 当前端代码有更新时，开发人员会重复步骤1到步骤5，以发布新的版本。
   • 在更新过程中，可能需要重启Nginx服务或采用其他方式使配置生效。

背景

一个使用 Vue 开发的单页面应用，在一次测试在使用中，发现使用着使用着，突然页面点击无效果（使用中前端进行过一次发版），测试打开控制台，发现控制台一堆 js 文件的 404 报错：

现象描述

根据测试反馈现象如下：

1. 用户在使用过程中，之前点击某个页面是正常，(当前发版之后)，点击其他页面无任何反应;
2. 打开控制台，点击任何一个页面时候，会动态加载的一个 JS 文件，然后 JS 文件加载显示 404 报错；
3. 测试员浏览器 -> 开发者工具 -> 控制台 -> 网络 -> 停用缓存 ， 停用缓存 选项未勾选。
4. 当测试员刷新页面后，又能重新正常加载静态资源。