先情概要
我们公司有存在比较早的平台项目,现在有个需求需要从原来那个平台跳到我们目前用Vue做的平台,
于是乎写了一个js, 在这里进行登录,登录成功之后跳转到新的Vue平台的目标页面。
问题来了,清空缓存后第一次跳转的时候,总是没办法跳到目标页面,总是跳到首页,也就是路径只到/index,而目标页是/xxx/xxx,之后跳转才会跳到目标页。
思前想后不知道为什么,本以为是后端做了什么处理,但是后端那边接收到请求的时候,路径就只剩下/index
后来去看了nginx, nginx接收到请求的时候路径也只剩下/index。。(但是我后端同事本地环境进行跳转倒是没有问题,到底是为什么现在也不清楚。)
后来猜测是因为vue 路由默认是哈希模式 有个#,nginx可能无法识别所以把#后面的全都干掉了。
之后我们尝试切换到把路由切换到history模式,试了一下,确实可以正常跳转,但是又出现新的问题。
切换成history模式之后路径中不带# 就是正常的 类似 localhost:8000/index/xxx/xxx 这种路径,但是我们知道vue实质上是个单页面应用,这样请求服务器是无法找到对应页面的,所以会返回404。
这时候需要在nginx加上一行配置
try_files $uri $uri/ /xxx/index.html;
这里的意思是如果nginx找不到对应路径就返回 后面的/xxx/index.html
这样子就不会返回404了,另外需要对应修改的还有vue里的配置
路由的路口文件中
const routes = new Router({
mode: "history",//history模式
base: '/xxx/', // 这里更改为nginx中对应的配置路径
})
另外如果出现js或者css文件找不到的情况下则需要在对应配置文件中修改静态资源文件的目录
assetsPublicPath: '/',
。。。。 但是话说回来我总觉得这次是误打误撞,可能根本原因不是因为这个,只是刚好改成history也能解决。
若有新的发现再回来更新