详解express使用vue-router的history踩坑

所以除了好看之外，history 模式还有其他优势。

我们知道，如果页面使用锚点，就是一个 <a> 标签， <a href=’#mark1′></a> ，点击之后如果页面中有 id 为 mark1 的标签会自动滚动到对应的标签，而 url 后面会加上 #mark .

问题就出在这里，使用 hash 模式， #mark 会替换掉 vue-router 模拟的路由。比如这个 <a> 标签是在上面说的 login 页面，点击之后 url 会从 https://www.text.com/admin/#/login 变成 https://www.text.com/admin/#/mark 。wtf？？？正常看来问题不大，锚点滚动嘛，实在不行可以 js 模拟，但是因为我要实现 markdown 的标题导航功能，这个功能是插件做好的，究竟该插件还是用 history 。 权衡利弊下还是使用 history 模式工作量小，而且更美。

怎么做

既然知道是什么，为什么，下面就该研究怎么做了。

官方文档里有“详尽”的说明，其实这事儿本来不难，原理也很简单。通过上文我们知道 vue-router 采用 hash 模式最大的原因在于所有的路由跳转都是 js 模拟的，而 js 无法获取服务器判断路由的行为，那么就需要服务器的配合。原理就是无论用户输入的路由是什么全都指向 index.html 文件，然后 js 根据路由再进行渲染。

按照官方的做法，前端 router 配置里面加一个属性，如下

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

后端的我不一一赘述，我用的是express，所以直接用了 connect-history-api-fallback 中间件。（中间件地址 https://github.com/bripkens/connect-history-api-fallback）

const history = require('connect-history-api-fallback')
app.use(history({
  rewrites: [
    {
      from: /^/.*$/,
      to: function (context) {
        return "/";
      }
    },
  ]}));
app.get('/', function (req, res) {
  res.sendFile(path.join(process.cwd(), "client/index.html"));
});
app.use(
  express.static(
    path.join(process.cwd(), "static"),
    {
      maxAge: 0,//暂时关掉cdn
    }
  )
);

坑1

按道理来说这样就没问题了，然鹅放到服务器里面之后，开始出幺蛾子了。静态文件加载的时候接口返回都是

We’re sorry but client doesn’t work properly without JavaScript enabled. Please enable it to continue.

看着字面意思，说我的项目（项目名client）没有启用 JavaScript ，莫名其妙完全不能理解。于是乎仔细比对控制台 responses headers 和request headers ，发现了一些猫腻，请求头的 accept 和响应头的 content-type 对不上，请求 css 文件请求头的 accept 是text/css，响应头的 content-type 是 text/html。这个不应该请求什么响应什么吗，我想要崔莺莺一样女子做老婆，给我个杜十娘也认了，结果你给我整个潘金莲让我咋整。