node/express方式部署vue项目非nginx部署

一、npx serve

安装了node就会安装了npx，通过npx serve可以启动一个轻量级的服务
将vue工程build出来后 使用npx serve来起服务。例如：npx serve dist/ -l port
但是这种方式有一些问题：
1，如果vue使用的是history模式，那么浏览器刷新会报404，可使用hash模式代替history模式
被划掉了是因为才理解npx serve到底什么意思：npx实际上是临时安装了serve包并且执行了serve这个指令，相当于 npm i serve 然后执行serve指令。然后到serve的这个npm包的官方文档中发现该包可以写配置文件。
npm中serve的说明：https://www.npmjs.com/package/serve

image.png
serve的官方配置选项说明：https://github.com/vercel/serve-handler#options
image.png
其中的rewrites就可以解决刷新浏览器404，以及代理问题。类似如下代码：
image.png

2，vue项目貌似无法使用接口代理转发模式，可将域名写死到axios的baseURL上这样接口就不走代理了。
3，这种方式起的服务，终端不能关闭，要不然就挂了，可以使用pm2那种守护进程的插件来起服务

二、express搭建服务，实现类似nginx作用

1，创建一个空文件夹release-name，创建node项目 npm init -y
2，安装需要的三方库
npm install express --save 搭建服务用的
npm install connect-history-api-fallback --save 解决浏览器刷新报404
npm install http-proxy-middleware --save 解决接口转发跨域问题
3，在release-name文件夹中创建server.js

var express = require("express");
var serveStatic = require("serve-static");
var history = require("connect-history-api-fallback"); //处理浏览器刷新404问题
const proxy = require("http-proxy-middleware").createProxyMiddleware;//处理接口转发跨域问题
var app = express();
app.use(history());//这行代码必须在serveStatic之前使用
app.use(serveStatic(__dirname + "/dist"));//指定打包后的静态文件路径
var port = process.env.PORT || 5001;
var hostname = "127.0.0.1";
//配置接口代理转发
app.use(
  "/",
  proxy(
      [`/api/**`], {
          target: `https://xx.xxx.com/`,
          changeOrigin: true,
          onProxyReq: (proxyReq, req, res) => {
              // 在代理请求发送到目标服务器之前，对请求头进行修改
             
          },
          onProxyRes: (proxyRes, req, res) => {
              // 在代理服务器收到目标服务器的响应后，对响应头进行修改
              
          }
      },
  ),
);
app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

4，将vue工程build出来的dist包扔到release-name中即可
5，执行node server.js即可 或者 在release-name的package中增加执行脚本例如：serve: "node server.js"，然后执行npm run serve即可，同理窗口不能关闭，或者使用pm2类似的守护进行来启服务
6，release-name目录结构如下

image.png