vue路由的模式默认是hash的,url上会带有#号,路由在#号后面 如:http://api.51app.cn/gamepage/index.html#/index
在百度统计的时候把#后面的去掉了,就没有统计到具体的页面,并且这样很不美观,希望改成这样http://api.51app.cn/gamepage/v1/index
需要改的地方
router/index.js;与routes同一级添加两个属性mode:'history',base:'/gamepage/v1'
非根目录的项目需要加上base 的路径
我的理解是base是指定url上哪一段是目录,之后的就是路由了后台nginx配置 未找到该路径文件的时候重定向到/gamepage/index.html
if (!-e $request_filename) {
rewrite ^/(.*) /gamepage/v1/index.html last;
break;
}
刷新的时候404 也就是因为url上目录和路由是连在一起的,后台默认是全部当目录去找,后面的路由当然是没有这个目录的,故这个时候直接重定向到项目index.html所在的目录,再通过vue的base字段划分出路由部分即可
3.但后来发现开发的时候,本机的服务器也会刷新404,故开发时用hash模式,build时用history
const IS_DEV = process.env.NODE_ENV === 'development';
export default new Router({
//mode、base还要区分开发与生产 开发url是在根目录,开发时history模式刷新会error,应该是本机的服务器未配置
//当mode为hash时候发现base未产生左右,故开发用hash模式,生产用history模式 防止url上带#,百度统计等拿不到#后面的参数,也是美化url
mode: IS_DEV?'hash':'history',//history模式没有井号,默认为hash,有井号
base: '/'+location.pathname.split('/')[1]+'/'+location.pathname.split('/')[2],//取到两级的目录 后面都是路由
routes:[...]
- 为方便区分版本与测试,在gamepage目录下又建了v1、v2、test三个文件夹,里面再放veu build之后的项目文件;
那这时nginx里面就要配置至少三种情况v1下的404去找v1下的index.html、v2下的404去找v2下的index.html等;
不知能否动态设置,nginx的配置文件里面$request_filename这个变量我觉得就是url的信息,可能要去掉前面的域名 直接如 /gamepage/v1/index;考虑用正则取到前面两级;
var str = "http://api.51app.cn/gamepage/v1/index?channel=i4";
var patt1 = /\/[a-zA-Z0-9]+\/[a-zA-Z0-9]+/;
console.log(str.match(patt1)[0])
因此这个项目的结构都要是两级的,不能多不能少
参考
vue路由history模式刷新404问题解决方案
Vue下路由History模式打包后页面空白
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法