五步用Nginx部署Vue项目及动态路由刷新404问题解决

期末月前本来部署过一次，昨天部署的时候发现又给忘了，而且出了很多问题，在这统一汇总一下。

在vue.config.js下的devServer把host改成服务器的地址
在这里插入图片描述

用

npm run build

打包，最后是这样的，并且目录下多了个dist文件夹
在这里插入图片描述

我用的xshell，没办法上传文件夹，所以我是压缩成rar用rz上传再在服务器上解压的，至于linux怎么解压rar，看这如何在Linux系统中解压rar文件
肯定有更好的方法，但是我还没找到。解压后长这样
在这里插入图片描述

这一步很关键，设置不好可能出现页面403或404报错。
首先，用

nginx -t

找到nginx.conf的具体路径

! 2a3be3bf.png)

接下来开始编辑这个文件，下图这个地方要改成当前操作用户的用户名，不然可能部署之后打开页面报错403。
在这里插入图片描述
接下来，将1部分改成解压后的dist存放位置
2和3是解决路由刷新报错404的问题

 try_files $uri $uri/ @router;
 location @router {
    rewrite ^.*$ /index.html last;}

systemctl restart nginx

然后就能正常打开页面啦

标签： nginx vue.js 运维

本文转载自: https://blog.csdn.net/weixin_54218079/article/details/125755795
版权归原作者 我先润了 所有，如有侵权，请联系我们删除。