node.js - vue-cli webpack express配置服务端路由规则

问题描述

问 题

vue-cli的webpack项目中，服务端定义路由规则，在dev-server.js中添加路由引用，修改页面路径结构和模板，不知道页面请求和响应哪里出了问题。

例如定义如下路由

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

var upload = multer({ dest: 'upload/' });
router.get('/', function(req, res) {
    res.render('index', { title: 'index' });
});

router.get('/error', function(req, res) {
    res.render('error', { title: 'error' });
});

router.get('/index', function(req, res) {
    res.render('index', { title: 'index123' });
});

router.post('/test',  function(req, res, next) {

    res.send({ ret_code: '0' });
});

module.exports = router;

在dev-server.js中添加路由引用，修改页面路径结构和模板

var routes = require('./server/routes')
var ejs = require('ejs');
app.engine('html', ejs.__express);
app.set('views', path.join(__dirname, "views"));
app.set('view engine', 'html');
app.use('/', routes);

暂时还没看清楚哪里出了问题

解决方案

这配置没问题。

// serve webpack bundle output
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

app.use('/', routes);

按这样操作，以上代码会按顺序处理，vue-cli中默认添加了devMiddleware、hotMiddleware这两个中间件，可以按需调整使用。

这篇关于node.js - vue-cli webpack express配置服务端路由规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！