- 最近在做一些活动页面的开发，在开发的过程中要用到和本地server并进行本地联调，而在本地服务联调中无可避免的会涉及到跨域。因此自己利用browser-sync简单的搭建了个服务，并采用http-proxy-middleware解决了联调过程中的跨域问题。
- 小弟现在为各位看官献上具体攻略，首先我们得安装node，详情https://nodejs.org/en/；
- 安装browser-sync，
npm install browser-sync -D; - 安装http-proxy-middleware，
npm isntall http-proxy-middleware -D; - 项目根目录下新建server.js，
const browserSync = require('browser-sync').create();
const proxy = require('http-proxy-middleware');
// 获取本地ip
function getIP() {
const ifaces = require('os').networkInterfaces();
let ip = '127.0.0.1';
for (let dev in ifaces) {
if (ifaces.hasOwnProperty(dev)) {
ifaces[dev].forEach(details => {
if (ip === '127.0.0.1' && details.family === 'IPv4') {
ip = details.address;
}
});
}
}
return ip;
}
/* 代理中间件
* 具体只用文档参考 https://www.jianshu.com/p/a248b146c55a
*/
let proxyArr =[
// 代理转发接口(1)
proxy('/api1', {
target: 'http://www.baidu.com:80',
changeOrigin: true,
}),
// 代理转发接口(2)
proxy('/api2', {
target: 'http://www.taobao.com:80',
changeOrigin: true,
})
]
/* browser-sync
* 更多配置参考 http://www.browsersync.cn/docs/api/
*/
browserSync.init({
// 配置server
server: {
// server的基础路径
baseDir: './',
// 使用中间件
middleware: [...proxyArr]
},
// 定义host
host: getIP(),
// 设置端口
port: 8099,
// 项目启动时使用定义的host
open: 'external',
// 项目启动时打开的页面路径
startPath: '/activities/index.html',
// 修改那些文件的时候浏览器页面会自动刷新
files: ['./**/*.html', './**/*.css', './**/*.js']
})
- 至此，我们的server算是写完了，终端运行node server.js，浏览器会自动打开xxxxx:8899/activities/index.html，在项目目录下修改任意css、js、html当前页面都会自动刷新，当然联调的时候再也不用担心跨域问题。另外也可以在在package.json里边儿修改，下次启动项目直接在终端运行WX20190131-174612@2x.png
npm run server即可 -
项目目录参考如下
QQ截图20190508235633.png
- 写在最后，其实做这么一个东西，最主要还是想针对一个简单项目快速的实现跨域联调和浏览器热重载，当然有很多方法能实现这个功能，例如webpck+webpack-hot-middleware，但是相比较而言，webpack更偏向于项目工程化，会面临一系列的配置，学习成本相对较高。
