H5项目 基于vue+axios(mock)+nodejs+webpack多入口和多出口项目
最近接手了一个h5项目,真好又不用和jq打交道了(滑稽脸)
基于前后端分离,并且用nodejs作为后台服务,请求java服务器完成跨域请求接口。但是这种方案最终被pass掉了,因为公司是基于nginx。虽然用不了node但是本地起服务来测试还是很爽的。
贴一下server.js的内容
1,server利用express框架,启动node服务
2,并且利用app.all配置跨域(实现的效果其实没生效,最终实现的是proxy模块)
3,利用app.use实现静态资源打包,并且配置跨域的target(这个地方类似于开发的proxytable的配置选项)
4,app.get实现了多个出口的配置
5,最后监听3000端口,访问页面
var express = require('express'); var app = express(); var proxy = require('http-proxy-middleware'); app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Credentials", "true"); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); // 打包静态资源 app.use('/static',express.static(__dirname + '/demo/dist/static')); // 实现node服务请求java服务 app.use( '/apis', proxy({ target: 'http://' // 你的请求地址 , changeOrigin: true ,pathRewrite: { '^/apis': '' //需要rewrite重写的, } }) ); // 多出口 app.get('/operateCard.html', function(req, res){ res.sendFile(__dirname+'/demo/dist/operateCard.html'); }); app.get('/operatePwd.html', function(req, res){ res.sendFile(__dirname+'/demo/dist/operatePwd.html'); }); app.get('/operateMoney.html', function(req, res){ res.sendFile(__dirname+'/demo/dist/operateMoney.html'); }); var server = app.listen(3000,"0.0.0.0" ,function(){ var host = server.address().address; var port = server.address().port; console.log('App listening at http://%s:%s', host, port); });