一、设置前端项目代理

1. 搭建node express 项目

express 依赖下载

npm install express --save -g
npm install express-generator --save -g

安装“http-proxy-middleware”中间件

npm install --save-dev http-proxy-middleware

创建项目

express 项目名称
cd 项目名称
npm init
npm install

2. 将前端项目包放到目录下

如下图所示：

3. 创建config.js文件

// 前端项目存放目录和访问端口
var webConfig = {
    webPath: './dist/index.html',
    port: '8081'
}
module.exports = webConfig

4. 创建serve.js文件

var express=require("express");
var path=require("path");
var app=express();
var config = require("./config")  // 前端代码存放目录
// 访问前端项目
app.get('/', (req, res) => {
    var options = {
        root: __dirname,    
        headers: {
          "Content-Type": "text/html"
        }
    }
    res.sendFile(config.webPath,options, function(error){
        if(error){
            console.log('Sent failed:', 'index.html' + error);
        }else{
            console.log('Sent sucess:', 'index.html');
        }
    });
});
module.exports = app;

5. 创建app.js文件

var app = require("./server")
var config = require("./config")
app.listen(config.port);
console.log("Server running at localhost:" + config.port);

6.配置反向代理

在server.js中引入“http-proxy-middleware”中间件

const { createProxyMiddleware } = require('http-proxy-middleware');    // 引入反向代理中间件

设置代理

server.js

// 反向代理
var api = {
    target: 'http://192.168.1.205:6092', // 目标主机
    changOrigin: true,//允许跨域
    ws: true,
    pathRewrite: {
        '^/api': ''//请求的时候使用这个api就可以
    }
};
var apiProxy = createProxyMiddleware(api);  //开启代理功能，并加载配置
app.use('/api', apiProxy);  //对地址为"/api"的请求全部转发
var sev = {
    target: 'http://192.168.1.205:6091', // 目标主机
    changOrigin: true,//允许跨域
    ws: true,
    pathRewrite: {
        '^/sev': ''//请求的时候使用这个api就可以
    }
};
var sevProxy = createProxyMiddleware(sev);  //开启代理功能，并加载配置
app.use('/sev', sevProxy);  //对地址为"/api"的请求全部转发

7. 配置静态资源访问

server.js

app.use(express.static(path.join(__dirname, 'dist')));  // 配置访问静态文件的文件路径

二. 部署到服务器（Linux）

1. 在服务器上安装node:node安装

2. 部署项目

将前端项目代理的文件（上文创建的express项目）压缩并上传到服务器，然后解压、cd到该目录下

全局安装exxpress依赖

npm install express --save -g
npm install express-generator --save -g

修改前端配置

打开/dist/config/config.js文件,修改前端需要改的配置（如果要修改dist文件夹名称,请看下一步：修改前端文件路径）

修改node配置

打开server.js，修改前端项目文件名

若将“dist”文件重命名为“publish”，需要将下面的“dist”改为“publish”

app.use(express.static(path.join(__dirname, 'dist')));  // 配置访问静态文件的文件路径

打开config.js 修改相应配置

若将上面的“dist”文件重命名为“publish”，需要将下面的“dist”改为“publish”

// 前端项目存放目录和访问端口
var webConfig = {
    webPath: './dist/index.html',
    port: '8081'
}
module.exports = webConfig

其他：
https://www.html.cn/qa/node-js/12278.html
https://blog.csdn.net/qq_38504352/article/details/107024636
https://blog.csdn.net/xuhang666/article/details/83587953