首页 web前端 js教程 vue刷新404的问题解决方法

vue刷新404的问题解决方法

Mar 19, 2019 am 11:24 AM
javascript node.js typescript vue-router vue.js

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

1、 问题描述

利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!

2. 问题原因:

刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。

3. 解决方法:

在nginx配置里添加vue-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下

location / {
    try_files $uri $uri/ @router;
    index index.html;
}

location @router {
    rewrite ^.*$ /index.html last;
}
登录后复制
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!

以上是vue刷新404的问题解决方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

Vue-Router: 如何使用路由元信息来管理路由? Vue-Router: 如何使用路由元信息来管理路由? Dec 18, 2023 pm 01:21 PM

Vue-Router:如何使用路由元信息来管理路由?简介:Vue-Router是Vue.js官方的路由管理器,它可以帮助我们快速构建单页应用程序(SPA)。除了常见的路由功能外,Vue-Router还支持使用路由元信息来管理和控制路由。路由元信息是可以附加到路由上的自定义属性,它可以帮助我们实现一些特殊的逻辑或者权限控制。一、什么是路由元信息?路由元信息是

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

vue.js vs.反应:特定于项目的考虑因素 vue.js vs.反应:特定于项目的考虑因素 Apr 09, 2025 am 12:01 AM

Vue.js适合中小型项目和快速迭代,React适用于大型复杂应用。1)Vue.js易于上手,适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富,适合有高性能需求和复杂功能需求的项目。

JS 的 AI 时代来了! JS 的 AI 时代来了! Apr 08, 2024 am 09:10 AM

JS-Torch简介JS-Torch是一种深度学习JavaScript库,其语法与PyTorch非常相似。它包含一个功能齐全的张量对象(可与跟踪梯度),深度学习层和函数,以及一个自动微分引擎。JS-Torch适用于在JavaScript中进行深度学习研究,并提供了许多方便的工具和函数来加速深度学习开发。图片PyTorch是一个开源的深度学习框架,由Meta的研究团队开发和维护。它提供了丰富的工具和库,用于构建和训练神经网络模型。PyTorch的设计理念是简单和灵活,易于使用,它的动态计算图特性使

Vue.js很难学习吗? Vue.js很难学习吗? Apr 04, 2025 am 12:02 AM

Vue.js不难学,特别是对于有JavaScript基础的开发者。1)其渐进式设计和响应式系统简化了开发过程。2)组件化开发让代码管理更高效。3)使用示例展示了基本和高级用法。4)常见错误可以通过VueDevtools调试。5)性能优化和最佳实践如使用v-if/v-show和key属性可提升应用效率。

VUE是用于前端还是后端? VUE是用于前端还是后端? Apr 03, 2025 am 12:07 AM

Vue.js主要用于前端开发。1)它是一个轻量级且灵活的JavaScript框架,专注于构建用户界面和单页面应用。2)Vue.js的核心是其响应式数据系统,数据变化时视图自动更新。3)它支持组件化开发,UI可拆分为独立、可复用的组件。

Golang 和 Node.js 在后端开发中的对比 Golang 和 Node.js 在后端开发中的对比 Jun 03, 2024 pm 02:31 PM

Go和Node.js在类型化(强/弱)、并发(goroutine/事件循环)、垃圾收集(自动/手动)上存在差异。Go具备高吞吐量、低延迟,适用于高负载后端;Node.js擅长异步I/O,适合高并发、短请求。两者的实战案例包括Kubernetes(Go)、数据库连接(Node.js)、Web应用程序(Go/Node.js)。最终选择取决于应用程序需求、团队技能和个人偏好。

See all articles