安装+配置Express

1.安装Node.js

2.安装Express

进入文件夹

$ mkdir myapp
$ cd myapp

通过 npm init 命令为你的应用创建一个 package.json 文件。 欲了解 package.json 是如何起作用的，请参考 Specifics of npm’s package.json handling.

$ npm init

此命令将要求你输入几个参数，例如此应用的名称和版本。 你可以直接按“回车”键接受大部分默认设置即可，下面这个除外：

entry point: (代理服务器文件.js)

键入 app.js 或者你所希望的名称，这是当前应用的入口文件。如果你希望采用默认的 index.js 文件名，只需按“回车”键即可。

接下来在 myapp 目录下安装 Express 并将其保存到依赖列表中。如下：

$ npm install express --save

3.Hello world example

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

执行命令

$ node app.js

const express = require('express')
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express()
const proxy = require('http-proxy-middleware');//引入nodejs的反向代理模块
const path = require('path')
const options = {
    target: 'http://192.168.1.111:8889', // target host
    changeOrigin: true,               // needed for virtual hosted sites
    pathRewrite : {
        '^/api/loginHack':'/loginHack'
    }
};

// create the proxy (without context)
const exampleProxy = createProxyMiddleware('/api',options);
// const exampleProxy = createProxyMiddleware('/loginHack',options);

/***************************** 开始启动反向代理 **********************************/
// proxy middleware options
app.use(exampleProxy);
app.use(express.static(path.join(__dirname, 'public')))
// app.use(express.static("views")).listen(3001);
/***************************** 开始启动反向代理 **********************************/

/**************************** 开启服务监听 ******************************/
app.listen(10086, () => {
    console.log(`启动端口 10086`)
})

理解express.static()

为了提供对静态资源文件(图片、csss文件、javascript文件)的服务，请使用Express内置的中间函数 express.static 。
传递一个包含静态资源的目录给 express.static 中间件用于立刻开始提供文件。比如用以下代码来提供public目录下的图片、css文件和javascript文件：

app.use(express.static('public'));

express 会在静态资源目录下查找文件，所以不需要把静态目录public作为url的一部分。现在，你可以加载 public目录下的文件了：

http://localhost:3000/hello.html
http://localhost:3000/images/1.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/index.js

可以多次使用 express.static 中间件来添加多个静态资源目录，这时express 将会按照你设置静态资源目录的顺序来查找静态资源文件：

app.use(express.static('public'));
app.use(express.static('files'));

为了给静态资源文件创建一个虚拟的文件前缀(实际上文件系统中并不存在) ，可以使用 express.static 函数指定一个虚拟的静态目录，就像下面这样：

app.use('/static', express.static('public'));

现在你可以使用 /static 作为前缀来加载 public 文件夹下的文件了：

http://localhost:3000/static/hello.html
http://localhost:3000/static/images/1.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/index.js

然而，你提供给 express.static 函数的路径是一个相对node进程启动位置的相对路径。如果你在其他的文件夹中启动express app，更稳妥的方式是使用静态资源文件夹的绝对路径：

app.use('/static', express.static(__dirname + '/public'));

需求 ： 两个文件夹 ，要在express搭建的服务器中读取static文件夹下的资源

 main.js文件代码如下：

const express = require('express')
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express()
const proxy = require('http-proxy-middleware');//引入nodejs的反向代理模块
const path = require('path')
const options = {
    target: 'http://192.168.1.111:8889', // target host
    changeOrigin: true,               // needed for virtual hosted sites
    pathRewrite : {
        '^/api/loginHack':'/loginHack'
    }
};

// create the proxy (without context)
const exampleProxy = createProxyMiddleware('/api',options);

/***************************** 开始静态资源代理 **********************************/
// proxy middleware options
app.use(express.static(__dirname+"/views",{index:"abc.html"})); //修改默认文件名index.html

app.use('/static',express.static(__dirname+"/static")); 

/***************************** 开始启动反向代理 **********************************/
app.use(exampleProxy);

/**************************** 开启服务监听 ******************************/
app.listen(10086, () => {
    console.log(`启动端口 10086`)
})

前台abc.html文件引用路径

 <link rel="icon" type="image/x-icon" href="/static/assets/icon/favicon.ico" >
 <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
 <link rel="stylesheet" type="text/css" href="/static/css/cssreset.css"/>

node main.js 即可