vue路由在history 模式,刷新页面出现404 的问题

vue 路由的URL有两种模式,一种是 hash,一种是history ,history 模式更好看一些。

在使用hisory模式时,由于地址并不是真实存在,那么在刷新的情况下,这个会报404错误。

对于这个问题,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。

我这里是针对nginx的配置,总结如下:

server {
        listen       8001; ##表示的项目所占用的端口
        server_name  localhost;

        location / {
            root   C:\project\lichunhua;   #表示你的项目文件所处于的位置,在windows下面表示的是与conf目录处于同一级
	    try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
	#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        
	#因此需要rewrite到index.html中,然后交给路由在处理请求资源
	location @router {
		rewrite ^.*$ /index.html last;
	}
        #error_page   500 502 503 504  /50x.html;  这里是对500异常的重定位,我们一般不需要
        #location = /50x.html {
        #    root   html;
        #}
    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值