VUE 项目刷新路由指向index.html

时间:2021-10-17 23:28:48

背景描述:

VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误。

原因分析:

我猜测是因为在 VUE 项目中,路由是利用H5的 history ,看起来页面 url 发生了变化,其实根本就在同一个页面。简而言之,除了根路由之外的路由并不是有效的 url,所以直接刷新页面并不能 get 到对应的内容。

解决方案:

通过 nginx 配置,让所有页面回到根路由。

        location / {

                proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host; proxy_set_header X-Nginx-Proxy true; proxy_pass http://blogfront;
proxy_redirect off; rewrite ^(.*)$ /index.html;
}

关于如何配置 nginx,可以参考这篇文章

这里主要说一下最后一行,它表明在根路由下,所有页面路径都回到 /index.html。

VUE 项目刷新路由指向index.html的更多相关文章

  1. vue项目中路由验证和相应拦截的使用

    详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...

  2. vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)

    vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

  3. vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  4. vue项目、路由

    目录 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 js原型补充 vue项目生命周期 页面组件 配置自定义全局样式 路由逻辑跳转 路由重定向 组件的生命周期钩子 路由传参 ...

  5. (转)vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  6. vue项目的路由配置

    方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...

  7. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  8. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  9. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

随机推荐

  1. ActionLink()与jquery更好地结合建造MVC网页:

    众所周知,微软的MVC框架提供了一系列Helper以用于创建Ajax的网页. 但是,类似于Ajax.ActionLink()的方法创建的Ajax缺乏足够的灵活性,例如: 页面上有很多选项,我们需要根据 ...

  2. Android AsyncTask运作原理和源码分析

    自10年大量看源码后,很少看了,抽时间把最新的源码看看! public abstract class AsyncTask<Params, Progress, Result> {     p ...

  3. 关于STM32工程的错误,狗血错误。。。&period;&period;&bsol;CMSIS&bsol;core&lowbar;cm3&period;h&lpar;1087&rpar;&colon; error&colon; &num;20&colon; identifier &quot&semi;IRQn&lowbar;Type&quot&semi; is undefined

    这件事还是要写一篇博客了,为了后来的人不换致命性的错误 辛辛苦苦写的一个四个不同的引脚不同时钟不同寄存器分别产生四种不同占空比不同周期的信号方波程序超级经典  PS:页尾上传PWM波形产生工程附件供大 ...

  4. Asp&period;Net Identity 2&period;0 认证

    转Asp.Net Identity 2.0 认证 一个星期前,也就是3月20日,微软发布了Asp.Net Identity 2.0 RTM.功能更加强大,也更加稳定.Identity这个东西现在版本还 ...

  5. 51NOD 1258&&num;160&semi;序列求和&&num;160&semi;V4 &lbrack;任意模数fft 多项式求逆元 伯努利数&rsqb;

    1258 序列求和 V4 题意:求\(S_m(n) = \sum_{i=1}^n i^m \mod 10^9+7\),多组数据,\(T \le 500, n \le 10^{18}, k \le 50 ...

  6. Nodejs&plus;Grunt配置SASS项目自动编译

    Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...

  7. ASP&period;NET Core 2&period;0&colon; 二&period; 开发环境

    macOS:Install Visual Studio for Mac 系统要求: macOS 10.12 Sierra 及更高版本 其他要求: 可能会要求安装xcode或android相关环境, 详 ...

  8. Linux系统优化脚本

    #!/bin/bash ############################################################################## # File Na ...

  9. Guests组里的用户和其它组里的用户相比,在系统权限上有什么不同?

    系统的使用者主要分为:(以计算机管理员administrator 和普通用户User最为常用:一般个人电脑的话,不建议设置太多的用户,这样会影响系统的处理速度,增加许多的垃圾文件.) 1.Admini ...

  10. 前端基础-jQuery的最常用的的方法each、data、

    阅读目录 each inArray get index data 一.jQuery中each方法的应用 jQuery中有个很重要的核心方法each,大部分jQuery方法在内部都会调用each,其主要 ...