解决 Nginx 部署 Web 项目刷新报错 404

项目打包

run build//打包项目文件

项目上传

在目录/var/www/html下新建项目文件夹，将打包后的项目dist文件夹中的内容copy过去。

添加配置文件

配置文件的内容

重新启动服务

nginx -s reload

配置成功

浏览器输入地址，看到页面，配置成功。

总结

出现刷新 报404的错误，经查阅文档我们可知

web是SPA(单页面应用)，只有一个index.htm入口，其他路径是前端路由跳转实现的，nginx 没有对应这个路径，当然就是404了。 修改nginx配置文件如下:

在配置中加上try_files，意思跟翻译差不多，“尝试读取文件”。uri 这个是nginx的一个变量，存放着用户访问的地址,例如http://localhost:8200/chooseSize ,那么uri就是/chooseSize； uri/ 代表访问的是一个目录 例如http://localhost:8200/chooseSize/ ； 那么uri/就是/chooseSize/ .最后/index.html就是我们首页的地址。

所以，上面的意思是如果第一个存在，直接返回；不存在的话读取第二个，如果存在，读取返回；如果还是不存在，就会fall back到 try_files 的最后一个选项 /index.html,发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost:8200/index.html，这时就是我们的首页了。

现在刷新就不会出现这种情况了，问题解决！