一、npx serve

安裝了node就會安裝了npx，通過npx serve可以啟動一個輕量級的服務(wù)
將vue工程build出來后 使用npx serve來起服務(wù)。例如：npx serve dist/ -l port
但是這種方式有一些問題：
1，如果vue使用的是history模式，那么瀏覽器刷新會報404，可使用hash模式代替history模式
被劃掉了是因為才理解npx serve到底什么意思：npx實際上是臨時安裝了serve包并且執(zhí)行了serve這個指令，相當(dāng)于 npm i serve 然后執(zhí)行serve指令。然后到serve的這個npm包的官方文檔中發(fā)現(xiàn)該包可以寫配置文件。
npm中serve的說明：https://www.npmjs.com/package/serve

image.png

image.png

image.png

2，vue項目貌似無法使用接口代理轉(zhuǎn)發(fā)模式，可將域名寫死到axios的baseURL上這樣接口就不走代理了。
3，這種方式起的服務(wù)，終端不能關(guān)閉，要不然就掛了，可以使用pm2那種守護進程的插件來起服務(wù)

二、express搭建服務(wù)，實現(xiàn)類似nginx作用

1，創(chuàng)建一個空文件夾release-name，創(chuàng)建node項目 npm init -y
2，安裝需要的三方庫
npm install express --save 搭建服務(wù)用的
npm install connect-history-api-fallback --save 解決瀏覽器刷新報404
npm install http-proxy-middleware --save 解決接口轉(zhuǎn)發(fā)跨域問題
3，在release-name文件夾中創(chuàng)建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;//處理接口轉(zhuǎn)發(fā)跨域問題
var app = express();
app.use(history());//這行代碼必須在serveStatic之前使用
app.use(serveStatic(__dirname + "/dist"));//指定打包后的靜態(tài)文件路徑
var port = process.env.PORT || 5001;
var hostname = "127.0.0.1";
//配置接口代理轉(zhuǎn)發(fā)
app.use(
  "/",
  proxy(
      [`/api/**`], {
          target: `https://xx.xxx.com/`,
          changeOrigin: true,
          onProxyReq: (proxyReq, req, res) => {
              // 在代理請求發(fā)送到目標(biāo)服務(wù)器之前，對請求頭進行修改
             
          },
          onProxyRes: (proxyRes, req, res) => {
              // 在代理服務(wù)器收到目標(biāo)服務(wù)器的響應(yīng)后，對響應(yīng)頭進行修改
              
          }
      },
  ),
);
app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

4，將vue工程build出來的dist包扔到release-name中即可
5，執(zhí)行node server.js即可 或者 在release-name的package中增加執(zhí)行腳本例如：serve: "node server.js"，然后執(zhí)行npm run serve即可，同理窗口不能關(guān)閉，或者使用pm2類似的守護進行來啟服務(wù)
6，release-name目錄結(jié)構(gòu)如下

image.png