2021-11-16_浏览器报404_页面不显示数据_落实老爷爷指导：“晚上把白天工作中不会的，就得弄出来，非得弄出来”

1.浏览器报404：

1.1问题描述：点击菜单，新弹出的标签页中提示“404 Not Found nginx”。F12控制台报错“Failed to load resource: the server responded with a status of 404 (Not found)”。

1.2问题原因：压缩的前端包dist.zip有问题，没有包含一层dist目录。因为nginx跳转时会去找这层目录，找不到就404了。

2.页面不显示数据：

2.1问题描述：页面没有查到数据。

2.2问题原因：F12控制台里，request url类似“http://192.168.aaa.bbb/ccc/xxxyyy/zzz?v=123”。配置文件里xxx之后少了一个“/”。

3.思考：

3.1同事是怎样实现定位404问题原因的？我欠缺哪些知识？这个nginx是啥？我想我可以去查一下。

3.2同事是怎样帮我定位到页面不显示数据是由于配置文件有问题造成的？

4.实践：

4.1上网查看了nginx部署vue项目的帖子，结合我请教同事，同事帮我指导的思路。我想同事当时帮我分析的过程是这样的，既然以前同事部署没问题，那么我结合文档相同的步骤部署有问题，再结合报错“404 Not found”，那么就有很大可能是我压缩的dist.zip包有问题。

4.2同事当时帮我分析的过程是这样的：命令行进入nginx的html/projectName目录后，

#ls
xxx.js dist.zip index.html static

这就说明是有问题的。这里本应该有一个dist文件夹（在dist文件夹里面，再有xxx.js、index.html、static）。

本来正确的dist.zip里含有一层dist文件夹，dist文件夹里再有xxx.js、index.html、static。

但我当时压缩的dist.zip里没有包含dist文件夹这一层，而是直接是xxx.js、index.html、static。

4.3页面不显示数据的问题：

同事帮我找到问题后，我现在回过头来思考。分析问题的过程如下：根据F12控制台里报错的url：“/ccc/xxxyyy/zzz”，通过在前端项目里搜索“yyy/zzz”（因为这个是我稍微熟悉的常用业务功能路径），然后在搜到的代码位置，结合代码，及request.js里用到的几个prod.env.js里配置的常量，最终可以定位到F12控制台报错的原因是prod.env.js里的一个常量后面少了一个“/”。