node express 启动 vue项目 路由为 history 模式路由跳转问题

在express + vue 项目开发过程中，vue-router 设置 mode 为 history 时，页面刷新或者输入路径时，会直接访问node服务，而不会对应进入vue页面，在vue官网中已经给出了解决方法。但是有的时候自己配置总会出现问题，有一种简单的解决办法，就是利用connect-history-api-fallback 插件

vue

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/home'
    }
  ]
});

node express

使用 connect-history-api-fallback 插件

npm install connect-history-api-fallback --save

在node 主文件中使用

const express = require('express');
const app = express();

// 解决history模式
app.use(require('connect-history-api-fallback')());

app.listen(3000);

在express 配置里直接use该插件即可，也可根据自己需求做相应配置，例：

app.use(history({
  rewrites: [
    {//访问路径含dist则继续访问
      from: /^\/dist\/.*$/,
      to: function(context) {
        return context.parsedUrl.pathname;
      }
    },
    {//后缀为js|css 访问dist下相应文件
      from: /^\/.*[js|css]$/,
      to: function(context) {
        return '/dist/'+context.parsedUrl.pathname;
      }
    },
    {//访问路径不含dist则默认访问/dist/index.html
      from: /^\/.*$/,
      to: function(context) {
        return '/dist/';
      }
    },
  ]
}));