VUE 项目刷新路由指向index.html
背景描述:
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的更多相关文章
- vue项目中路由验证和相应拦截的使用
详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...
- vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)
vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.
- vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- vue项目、路由
目录 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 js原型补充 vue项目生命周期 页面组件 配置自定义全局样式 路由逻辑跳转 路由重定向 组件的生命周期钩子 路由传参 ...
- (转)vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- vue项目的路由配置
方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- vue项目实现路由按需加载的3种方式
vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...
随机推荐
- laravel配置路由出现404
nginx配置上加一句话 location / { #try_files $uri $uri/ =; try_files $uri $uri/ /index.php?$query_string; }
- [转]微信公众平台(测试接口)开发前的准备工作(转载自walkingmanc的专栏)
本文转自:http://blog.csdn.net/jiangweicpu/article/details/21228949 http://blog.csdn.net/walkingmanc/arti ...
- oracle 新建数据库 ,新建用户
net manager 数据库名----电脑名localhost 1521 , 服务名 orcl (oracle 版本不一样, 不同版本不一样,,) 然后测试.. sys 账号登录 新建用 ...
- php连接mssql
首先修改php.ini,将下行的前的分号去掉. extension=php_mssql.dll 由于本机没有安装客户端,所以要将ntwdblib.dll复制到C:\WINDOWS\system32目录 ...
- Ckeditor上传图片返回的JS直接显示出来,未执行!!!
Ckeditor上传图片网上有很多教程. 下面是我今天下午遇到的一个坑...自己挖的坑. 在conotroller里 我开始习惯性的 response.setContentType("app ...
- JavaScript 闭包的例子
例子出自<<JavaScript权威指南>>, 加上个人的理解和总结, 欢迎交流! /********************************************* ...
- C语言学生管理系统源码分享
大家好 我就是如假包换的...陈玲 自从运营了C语言程序设计微信公众号 很多粉丝都给我备注 ...奇葩 实在是不敢当 也被人开始叫玲玲姐 我知道 很多人都想看我出境 我本人也有 年多的舞台演讲训练 实 ...
- java-Runtime 调用命令
java是一个跨平台的语言,可以在多种平台上运行相应的程序,但是有些时候进行数据的提取时,可能就需要系统的相关命令,尤其是调用linux命令 这时候就需要使用java的Runtime命令,来执行lin ...
- 配置 cxf-ws spring bean 文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 01-html和head介绍
一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...