Express+Vue前后端路由冲突解决方法

 由于使用connect-history-api-fallback的history会导致Vue-router的路由优先于express的路由，而导致后端路由类似‘/api’的情况无法使用。我们需要通过使用express带顺序优先级的路由来实现history，以此确保后端路由优先，后端路由先匹配，后端没有匹配上的才把路由权交给前端。

 app.js 使用默认的static函数挂载‘/’目录，让其可以正常访问目录下的静态资源。

注意：按照代码优先原则，类似‘/api’要放在‘/’前面才能起作用。

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/',express.static('./dist'))


//routes
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
//‘/api’要放在‘/’的前面
app.use('/api', usersRouter);
app.use('/', indexRouter);


module.exports = app;

index.js路由文件，通过通配符返回index.html实现history的功能。将路由权交给Vue。

var express = require('express');
var path = require('path');
var router = express.Router();



/* 通配符返回 index.html 实现history */
router.get('*', function(req, res, next) {
  res.sendFile(path.join(__dirname, '../dist', 'index.html'));
});

module.exports = router;