Nginx部署Vue项目刷新页面404

最新推荐文章于 2025-04-23 22:47:39 发布

原创最新推荐文章于 2025-04-23 22:47:39 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue #404 #刷新 #history

vue 专栏收录该内容

53 篇文章

订阅专栏

vue项目router用的是history模式，用nginx代理服务器部署后只能看到主页，刷新或跳转其他页面就会出现404。

解决方法：修改nginx.conf配置文件，将客户端发来的url重定向到默认的index.html，就可以正常访问。

关键代码：

try_files $uri $uri/ /index.html;

完整配置：

server {
    listen       XXXX;                     //端口号
    server_name  XXX.XXX.XXX.XXX;          //本机IP地址
     
    location /{
        root E:/website/dist/;             //打包后的项目路径
        index index.html index.htm;        //默认访问的页面
        try_files $uri $uri/ /index.html;  //解决刷新页面变成404问题的代码
    }  
}