介绍
node-flex-serve 是一个基于 Express 实现的本地开发服务器，它支持静态资源的访问和 API 的代理。它的特点是支持前端开发中常用的 flex 布局，可以快速实现响应式布局，并且能够自动打开浏览器，在修改文件后自动刷新。
安装
你可以通过 npm 来安装 node-flex-serve：
npm install -g node-flex-serve
使用
启动服务
在项目的根目录下，执行以下命令：
flex-serve start
这将启动一个本地开发服务器，默认监听 8080 端口，并自动打开浏览器。如果你想改变监听端口，可以加上参数 --port，例如：
flex-serve start --port 8888
访问静态资源
你可以在项目的根目录下创建一个名为 public 的文件夹，在里面放入静态资源文件（如 HTML、CSS、JS、图片等）。这些文件会被映射到服务器的根目录下，你可以通过访问 http://localhost:8080/index.html 来访问其中的 HTML 文件。
API 代理
如果你的前端代码需要调用 API，通常情况下直接访问后端 API 是不行的（由于跨域访问的限制）。在这种情况下，你可以使用 node-flex-serve 进行代理。
在项目的根目录下创建一个名为 proxy.config.js 的文件，并在其中定义你想代理的 API。例如：
module.exports = {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {
'^/api': '/api'
}
}
};以上配置表示将所有以 /api 开头的请求转发到 http://localhost:3000/api。pathRewrite 用于重写路径，将 /api 替换成 /api。更多配置选项可以参考 http-proxy-middleware。
完成后，启动服务时加上参数 -c 或 --proxy-config，指定代理配置文件的路径：
flex-serve start --proxy-config proxy.config.js
现在你就可以像访问本地 API 一样访问远程的 API 了，例如访问 http://localhost:8080/api/userinfo。
flex 布局
node-flex-serve 支持在 HTML 中使用 flex 布局。使用方法与普通的 CSS 相通，不做赘述。这里给出一个简单的示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div style="text-align: center;">
<h1>Hello, world!</h1>
<p>This is a flex layout.</p>
</div>
</div>这个例子中，用 display: flex 把外层 div 变成了 flex 容器，用 justify-content: center; align-items: center 来居中内部的 div，用 height: 100vh 来占满整个屏幕。
自动刷新
当你修改了静态资源或者代理配置文件时，不需要手动刷新页面，node-flex-serve 会自动帮你重新加载。这个功能基于 browser-sync 实现，你可以参考它的文档了解更多细节。
结语
node-flex-serve 是一个简单易用的本地开发服务器，它支持静态资源的访问和 API 的代理，支持 flex 布局，并且能够自动打开浏览器，在修改文件后自动刷新。使用它可以让你更加专注于业务的开发，而不必担心繁琐的配置和细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8b238a385564ab6e3e