vue router hash改造采坑

2019-03-29 11:32 热度: 276 春风
vuerouter.png

背景交代

vue-router默认是使用URL的 hash来模拟一个完整的URL(类似于:#home),当URL改变时,不会造成页面的重新加载。

但是这种URL很丑有没有,不过vue-router也给提供了另外一种模式: history, 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

正文

vue-router提供的方式:

const router = new VueRouter({
    mode: 'history',
    routes: [...]
});

这样,再次访问的时候URL就类似于http://woshuone.com/blog/home,这种好看的地址了。

接下来,就是坑出现了(不过vue-router官网也提到了【苦笑.gif】)

这种模式下,如果用户直接访问 http://woshuone.com/blog/home 这个地址会返回404,这样就有点不友好了。

解决方法就是:需要在服务端进行配置(下面我着重说下express下的解决方案,其他的类似于nginx服务器啥的配置可以参照下vue-router官网)。

1.使用 connect-history-api-fallback 中间件.

2.nodejs配置

const history = require('connect-history-api-fallback');
app.use(history({
    verbose: true,
    index: '/'
}));

然后这样大部分就可以了。。。

不过我的项目中vue-router还配置了base(即,应用的基路径,默认请求http://woshuone.com时会自动跳转到http://woshuone.com/blog).

这样在访问的时候会造成html返回200,不过static文件返回404,这是因为在打包的时候static文件以相对路径打包的, (即:static会请求加上base上的url,实际上是没有的)。

知道原因后就好解决了---改造webpack配置文件:

assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',

然后重新打包,完美解决。

散花。。。。。

查看评论 (0条)

添加评论