浅谈vue项目4rs vue-router上线后history模式遇到的坑

此次项目开发完后准备打包，因为hash模式的路径带#看着实在是有点丑，所以采用history模式。因为本次项目属于以前网站重构，但是seo问题，所以需要以前的一些地址路径写，所以vue-router的路径全部重改了。打包后查了网上一大堆，都说要把config里的index.js 里的build里的

assetsPublicPath: '/'改成‘./'，打包上线发现在hash模式下是没问题的，

但一旦改成history模式，有些动态js文件的路径都是错的。无奈之下死马当活马医，把‘./'改回了‘/'在history模式

下再次打包上线，发现点击跳转页面都是正常的，有些小激动。但是history模式的通病就是不能刷新，

因为原来跳转时其实不是通过请求服务器的，而是通过js操作history的API改变地址完成的。

当你刷新了之后浏览器就耿直的去请求服务器了，然而服务器没有这个路由，于是就404了。

解决方法1：可以做个代理，让所有访问服务器的地址都返回同一个入口文件。（推荐使用）

解决方法2：采用静态文件的形式让每个目录都存在就不会报错了

我们服务器是采用nginx，我不会，没弄，就自己用了nodejs和express搭建了个简单服务器，并采用了官方推荐的中间件

connect-history-api-fallback

使用方法：

在服务器app.js文件里引入

var history = require('connect-history-api-fallback');
然后在app绑定路由之前绑定中间件，
app.use(history({
rewrites: [
{ from: /^\/wap\/.*$/, to: '/index.html' }//这个是正确方式
]}));

我一开始

app.use(history({
rewrites: [
{ from: /^\/wap\/.*$/, to: '/' }
]
}));

这样的，发现刷新是正常的，但是路径后面总是多了个"/",看着很是奇怪,就试着改成当前下的html文件，发现真的可以。从此大功告成。

以上这篇浅谈vue项目4rs vue-router上线后history模式遇到的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

  • vue-router history模式下的微信分享小结

    背景 旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

  • vue项目查看vue版本及cli版本的实现方式

    查看cli版本,执行如下: vue -V 查看vue版本 npm list vue 补充知识:vue老项目升级vue-cli3.0问题总结 升级步骤 1. 删除原vue-cli并安装vue-cli3.0 2.删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3.把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js 4. 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下

  • 浅谈java项目与javaweb项目导入jar包的区别

    现在的项目基本上都是java web项目,所以导入jar包会出现问题,主要介绍一下java项目与javaweb项目的区别: java项目: 在classLoader加载jar和class的时候,是分开加载的,一般jar导入分两种: 1.在web-inf下的lib中直接引入 2.在user library上引入 无论以上哪种引入,jar包都能加载并且运行,classLoader会智能加载(本地JRE运行) javaweb项目: 不是通过本地的JRE运行的,而是部署到web服务器(比如tomcat,

  • 浅谈web项目读取classpath路径下面的文件

    本文主要研究的是web项目下读取classpath路径下的文件的问题,具体如下. 首先分两大类按web容器分类 一种是普通的web项目,像用Tomcat容器,特点是压缩包随着容器的启动会解压缩成一个文件夹,项目访问的时候,实际是去访问文件夹,而不是jar或者war包. 这种的无论你是用获取路径的方法this.getClass().getResource("/")+fileName 获取流的方法this.getClass().getResourceAsStream(failName);

  • vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)

    为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果. 解决问题: 以背景方式显示 无法获取按钮焦点,触发不了点击事件 实现过程 安装vue-particles npm install vue-particles --save-dev 全局配置vue-particles 在main.js里面: import VueParticles from 'vue-particles' Vue.use(VueP

  • 浅谈springboot项目中定时任务如何优雅退出

    在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生效. 启动类 启动类上我们获取到相应的上下文,捕捉相应命令.在这里插入代码片 @SpringBootApplication /**指定mapper对应包的路径*/ @MapperScan("com.youlanw.kz.dao") /**开启计划任务*/ @EnableScheduling

  • 浅谈SpringBoot项目打成war和jar的区别

    浅谈SpringBoot项目打成war和jar的区别

    首先给大家来讲一个我们遇到的一个奇怪的问题: 1.我的一个springboot项目,用mvn install打包成jar,换一台有jdk的机器就直接可以用java -jar 项目名.jar的方式运行,没任何问题,为什么这里不需要tomcat也可以运行了? 2.然后我打包成war放进tomcat运行,发现端口号变成tomcat默认的8080(我在server.port中设置端口8090)项目名称也必须加上了. 也就是说我在原来的机器的IDEA中运行,项目接口地址为 ip:8090/listall,

  • 浅谈Python项目的服务器部署

    关于Web服务器和应用服务器 基本概念: Web服务器主要功能就是存储.处理.传递网页,客户端和服务器之间基于HTTP协议进行通信. 应用服务器主要是处理动态请求,调用相应的对象完成对请求的处理,返回响应的结果. 两者之间的区别: Web服务器主要是以HTTP为核心,WEB UI为向导的应用,处理一些静态请求. 应用服务器虽然也支持HTTP协议,但应用服务器可以通过很多协议为应用程序提供商业逻辑. Python项目部署架构 在我们平时搭建一个Python Web项目时,比如Django框架的项目

  • 浅谈在fetch方法中添加header后遇到的预检请求问题

    今天在使用fetch方法 fetch('xxx.com',{header:{bbbbbbb:111}}) 浏览器返回的请求信息中,header变成了 :authority:koss.nocorp.me :method:OPTIONS :path:/?a=1 :scheme:https accept:*/* accept-encoding:gzip, deflate, br accept-language:zh-CN,zh;q=0.8 access-control-request-headers:

随机推荐