简单的使用express web静态服务

简单的使用node express web静态服务

express文档

安装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