vue项目前缀nginx部署，解决刷新500 404等问题

前一阵子有个项目，前端是vue3的。

vue项目一般会集成vue-router，通过模拟路由，实现单页面功能。

开发时不注意，使用Nginx部署时，就会出现一个坑，页面一刷新，就找不到页面。

百度一下，找到靠谱的博客为：https://blog.csdn.net/weixin_41127362/article/details/134710629

不仅介绍了Nginx配置，还介绍了前端构建工具的配置，非常不错。

前端配置我没有验证，Nginx的介绍是有效的。

location / {
     root   /html/;
     try_files $uri $uri/ /【前缀名】/index.html;
     index  index.html index.htm;
}

这里最重要的一句就是try_files。大概的意思就是页面找不到的时候，去这几个路径找页面。

所以try_files后面，写上vue项目首页index.html的路径即可。

【前缀名】=>vue项目默认没有前缀，如果是一个端口内部署多个前端，就要在路由前增加一个统一的前缀名。跟tomcat部署war包后路径中有war包名，有异曲同工之妙。