背景描述:

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模块拆分、element按需加载

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...

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

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

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

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

随机推荐

  1. [SoapUI] Datasink怎么显示每次循环的结果

    https://www.soapui.org/reporting/the-report-datasink.html

  2. android 弹出软键盘将底部视图顶起问题

    今天要做一个搜索功能,搜索界面采用AutoCompleteTextView做搜索条,然后下面用listview来显示搜索结果,而我的主界面是在底 部用tab做了一个主界面导航,其中有一个搜索按钮,因为 ...

  3. ORACLE实用函数之一 ratio_to_report的简单使用

    应用场景: 查询学生成绩级别(ABCDE)个人数和所占百分比(案列简单,勿喷). 表结构: create or replace table stu_grade( id varchar2(36), le ...

  4. 2018.07.22 bzoj3613: [Heoi2014]南园满地堆轻絮(逆序对结论题)

    传送门 做这道题有一个显然的结论,就是要使这个数列单调不减,就要使所有逆序对保证单调不减,也就是求出所有逆序对的最大差值,然后除以2然后就没了. 代码如下: #include<bits/stdc ...

  5. =delete(c++11)

    1.为什么要阻止类对象的拷贝? 1)有些类,不需要拷贝和赋值运算符,如:IO类,以避免多个拷贝对象写入或读取相同的IO缓冲 2.如何阻止? 1)不定义拷贝构造函数和拷贝赋值运算符时,好心的编译器也会及 ...

  6. LA 4329 Ping pong (树状数组)

    题意:从左到右给你n个不同的数值,让你找出三个数值满足中间的数值在两边的数值之间的个数. 析:题意还是比较好理解的,关键是怎么求数量,首先我们分解一下只有两种情况,一个是左边<中间<右边, ...

  7. (二)spring-mvc-showcase 和 swagger-springmvc 的恩恩怨怨

    1. 搜索 spring showcase 就可以找到这篇 http://spring.io/blog/2010/07/22/spring-mvc-3-showcase 就是教你如何使用spring ...

  8. OpenNI检测不到Kinect Camera和Kinect Audio了

    ?? 只有检测到了Kinect Motor(马达)而马达是微软开发的. 那么PrimeSense出了什么问题呢? 我的系统是Win7 64位的. 是由于电源供电出错.

  9. spring 3.X与jdk 1.8不兼容

    1.报错(部分) 2.解决 虽然Spring的jdk要求如下,但是spring 3与jdk1.8不兼容(使用的是spring 3.2) 在eclipse将jdk版本下调.这里将JDK调到1.7(在ec ...

  10. jquery 问题

    detach():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.与remove()不同的是,所有绑定的事件.附加的数据等都会保留下来. jquery ajax不 ...