vue 路由history模式

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模式下刷新无法渲染页面问题的解决方法

vue 路由history模式

推荐阅读更多精彩内容