vue+nginx history模式404解决方案

最新推荐文章于 2025-07-09 08:52:20 发布

王者光荣

最新推荐文章于 2025-07-09 08:52:20 发布

阅读量2.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：移动互联网开发 javascript

本文链接：https://blog.youkuaiyun.com/hylqqcsd/article/details/92978273

移动互联网开发同时被 2 个专栏收录

40 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

博客聚焦于Vue与Nginx结合使用时，history模式下出现404问题的解决方案。在信息技术领域，Vue前端框架搭配Nginx服务器是常见组合，history模式会引发页面访问异常，此方案能有效解决该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

server
{
	listen 80;
	server_name xxx.com;
	access_log /usr/local/src/admin/log/access.log;
    error_log /usr/local/src/admin/log/error.log;
	location / {
		root /usr/local/src/admin;
		try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
		index index.html;
	}
	#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
	#因此需要rewrite到index.html中，然后交给路由在处理请求资源
	location @router {
		rewrite ^.*$ /index.html last;
	}
}