简单的使用node express web静态服务
安装express,需提前装好node
// 创建文件夹并进入
mkdir myapp
cd myapp
// 创建一个 package.json 文件
npm init
// 此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按“回车”键接受大部分默认设置即可
// 入口文件 entry point: (index.js) 可以改成你所希望的名称
// 安装 express
npm install express --save
// 安装需要用到的包
npm install connect-history-api-fallback --save
npm install http-proxy-middleware --save-dev
入口文件详细配置, http-proxy-middleware文档,connect-history-api-fallback文档
const express = require('express')
const app = express()
const port = 4200
const path = require('path')
const history = require('connect-history-api-fallback');
const { createProxyMiddleware } = require('http-proxy-middleware');
// 代理转发 , 代理需写到 app.use(history()) 前面,不然可能会出现某些请求会按照路由去请求
app.use('^/api', createProxyMiddleware({
target: 'http://xxx.com:yyyy', // 目标服务器
changeOrigin: true, // 默认false,是否需要改变原始主机头为目标URL, 简单理解为是否需要跨域
pathRewrite: { // 也可为函数 pathRewrite: (path) => path.replace(/^\/api/, ""),
// '^/api/old-path': '/api/new-path', // 重写请求,比如我们源访问的是api/old-path,那么请求会被解析为/api/new-path
'^/api': '' // 同上, 去掉api, /api/xxx => /xxx
},
ws: false, // 是否代理websockets
secure: false, // 是否是https
hostRewrite: "xxx.com:yyyy", //重定向的位置主机名。
}));
// 处理vue中的model:history 模式,需要放到express.static 执行之前
app.use(history());
// 静态文件夹, __dirname是服务顶层目录,如果需要静态的文件夹不在当前目录下,可以使用express.static(path.join(__dirname, '../xxx/public')),通过相对路径去配置
app.use(express.static(path.join(__dirname, 'public')));
const server = app.listen(port, () => {
console.log(`Example app listening on ${port}`);
})
一个简单web服务就配置好了
启用
// index.js 就是上面的配置文件
node ./index.js