vue路由history模式刷新页面时出现404问题的两种解决方法

本篇文章给大家带来的内容是关于vue路由history模式刷新页面时出现404问题的两种解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

vue hash模式下,url中存在’#’,用’history’模式就能解决这个问题。但是history模式会出现刷新页面后,页面出现404。解决的办法是用nginx配置一下。

在nginx的配置文件中修改

方法一:

location /{    root   /data/nginx/html;    index  index.html index.htm;    if (!-e $request_filename) {        rewrite ^/(.*) /index.html last;        break;    }}

登录后复制

方法二:
vue.js官方教程里提到的https://router.vuejs.org/zh/g…

  server {        listen       8081;#默认端口是80,如果端口没被占用可以不用修改        server_name  myapp.com;        root        D:/vue/my_app/dist;#vue项目的打包后的dist        location / {            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404            index  index.html index.htm;        }        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件        #因此需要rewrite到index.html中,然后交给路由在处理请求资源        location @router {            rewrite ^.*$ /index.html last;        }        #.......其他部分省略  }

登录后复制

以上就是vue路由history模式刷新页面时出现404问题的两种解决方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2739481.html

(0)
上一篇 2025年3月8日 02:06:06
下一篇 2025年3月8日 02:06:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js线程机制与事件机制的详细介绍(图文)

    本篇文章给大家带来的内容是关于js线程机制与事件机制的详细介绍(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、进程与线程 1.进程 进程是指程序的一次执行,它占有一片独有的内存空间,可以通过windows任务管…

    2025年3月8日 编程技术
    200
  • vue组件的制作流程介绍(附代码)

    本篇文章给大家带来的内容是关于vue组件的制作流程介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率。更重要的是我们还可以打包发布,俗…

    2025年3月8日
    200
  • 探究nginx中的HTTP处理流程是什么?

    本篇文章就给大家探究一下nginx http处理流程是什么。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 1.初始化服务器 server指令用于配置virtual server,我们通常会在一台机器配置多个virtual…

    2025年3月8日 编程技术
    200
  • js中常见的继承方式有哪些?(附示例)

    本篇文章就给大家举例介绍js中常见的继承方式有哪些?(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 面向对象编程很重要的一个方面,就是对象的继承。A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方…

    2025年3月8日 编程技术
    200
  • vue指令如何实现气泡提示(附代码)

    本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 菜鸟学习之路 //L6zt github 自己 在造组件轮子,也就是瞎搞。自己写了个slider组件,想加个…

    2025年3月8日
    200
  • 如何利用Jest测试JavaScript(Mock函数)

    本篇文章给大家带来的内容是关于如何利用jest测试javascript(mock函数),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在本篇教程中,我们会介绍 Jest 中的三个与 Mock 函数相关的API,分别是jes…

    2025年3月8日
    200
  • Jest是什么?Jest的基本使用方法

    本篇文章给大家带来的内容是关于jest是什么?jest相关知识的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1 什么是 Jest? Jest Jest是 Facebook 的一套开源的 JavaScript 测试框…

    2025年3月8日
    200
  • vue.js响应式原理的深入理解

    本篇文章给大家带来的内容是关于vue.js响应式原理的深入理解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及…

    编程技术 2025年3月8日
    200
  • 使用electron怎么实现网盘的悬浮窗口?

    本篇文章给大家带来的内容是关于使用electron怎么实现网盘的悬浮窗口?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 相关依赖 里面使用了vuex  vue  vue-route storeJs storeJs 用来持久…

    2025年3月8日
    200
  • vue组件之间相互传递数据的实现方法(代码)

    本篇文章给大家带来的内容是关于php协成实现的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、子组件给父组件传递数据 父组件:{{total}} Vue.component(‘son-component’…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论