node环境部署vue项目

本项目解决 前后台分离， 跨域问题
前提概要：之前是单独将vue打包之后的dist包存于nginx，但是目前需要部署到node环境中

注意：前端项目为vue项目打包之后的dist包

项目环境：tomcat+node+gbase

目录结构（只需要dist包和app.js即可）：

1、使用express模块

需要下载node_modules包

npm install express

2、手动创建入口文件app.js

//使用express构建web服务器 --11:25
const express = require('express');

var app = express();

// 端口号
var server = app.listen(3000);

//托管静态资源到public目录下
app.use(express.static('dist'));

3、已经托管到dist文件夹下了,你需要将你打包的dist文件放入根目录

启动命令：

node app.js

访问ip+创建的端口号(3000)页面已经启动了,但是，会发现跨域问题。
此处，就得安装反向代理的插件了

npm install http-proxy-middleware

4、跨域相关配置

const express = require('express');

var proxyMiddleWare= require('http-proxy-middleware');//引入反向代理的插件

var app = express();
app.use(express.static(__dirname+"/public/dist"));//__dirname 当前目录 ,可以打印看看console.log(__dirname+"/public/dist")

app.use("/apis",proxyMiddleWare({//设置代理
  target:"http://192.168.6.131:8003",//目标后端服务地址
  changeOrigoin:true,//是否跨域
  pathRewrite: { '^/apis': '/' }//重写
}));

app.listen(3000);//端口号

再次运行就调用请求啦！

因http-proxy-middleware版本问题，会报proxyMiddleWare方法找不到，修改如下：

const {createProxyMiddleware}= require('http-proxy-middleware');//引入插件
app.use(createProxyMiddleware("/apis",{
  target:path,//目标后端服务地址
  changeOrigoin:true,//是否跨域
  pathRewrite: { '^/apis': '' }//重写
}));

http-proxy-middleware 0.x.x版本的引用方式

const proxy = require('http-proxy-middleware');

http-proxy-middleware 1.0.0版本的引用方式

const { createProxyMiddleware } = require('http-proxy-middleware');

参考地址：
部署node环境: https://blog.youkuaiyun.com/yaorui_123456/article/details/108260930
实现跨域问题: https://blog.youkuaiyun.com/bhq1711617151/article/details/80423665