Vue-cli创建项目从单页面到多页面2-history模式

Posted 2020-10-15 Silence

之前讲过怎样将vue-cli创建的项目改造成多页面（vue-cli创建项目从单页面到多页面），今天说一下怎样在多页面的前提下使用history模式。

如何使用history模式

因为vue默认的hash模式的url有些丑，所以我们可以在路由的配置中添加如下配置：

   import Router from \'vue-router\';
   new Router({
     mode: \'history\'  // 这样设置后，就可以去掉url中丑丑的“#”啦
   });

但是如果只是这样使用的话，在本地开发时，有一个问题，那就是当你访问其他页面的时候，只能使用xxx/pagename.html 这种方式访问，而不是xxx/xxx2/xxx3等方式，直接刷新后，并不能定位到你预期的pagename.html，反而会定位到index.html（因为默认会定位到这里）;

解决方案

在build/dev-sever.js中，我们可以通过connect-history-api-fallback 模块修改，修改方式如下：
// SPA应用浏览器回退支持配置

var rewrites = {
  rewrites: [{
    from: \'/home/\', // 正则或者字符串
    to: \'/home/index.html\', // 字符串或者函数
  }]
};
// handle fallback for HTML5 history API
app.use(require(\'connect-history-api-fallback\')(rewrites));

官方使用文档见github：https://github.com/bripkens/connect-history-api-fallback

我的vue多页面系列的其他博客链接：

Vue-cli创建项目从单页面到多页面

Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下

Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理