你是不是一直存在個(gè)困惑？vue項(xiàng)目build出來的dist文件夾下index.html直接點(diǎn)開始控制臺(tái)一頓報(bào)錯(cuò)。今天咱就給他治服。

解決方案就是本地啟動(dòng)一個(gè)node服務(wù)。詳細(xì)步驟如下：

• 創(chuàng)建項(xiàng)目

   npm init 
  

• 安裝express

  npm install express
  

• 使用
  新建一個(gè)js，我這命名為server.js

    var express = require("express");
    var app = express();
    // 靜態(tài)資源代理
    app.use("/", express.static(__dirname + "/dist"));
  
    app.get("/", function (_, res) {
      res.sendFile(__dirname + "/dist/index.html");
    });
  
    var server = app.listen(8088, function () {
      var port = server.address().port;
      console.log('localhost:' + port);
    });
  

• 運(yùn)行
  把vue項(xiàng)目中build生成的dist文件夾copy過來。

  node server.js
  

  打完收工
  

上面舉例的是個(gè)沒有請(qǐng)求接口的項(xiàng)目，但是我們的項(xiàng)目不請(qǐng)求接口是不可能的。 所以請(qǐng)求接口還是會(huì)有問題直接報(bào)404。

為啥項(xiàng)目開發(fā)運(yùn)行過程中不會(huì)出問題，是因?yàn)槲覀冊(cè)?code>vue.config.js中配置的 devServer 。

當(dāng)項(xiàng)目打包之后，你會(huì)發(fā)現(xiàn)項(xiàng)目變成靜態(tài)頁(yè)面了，我們會(huì)把頁(yè)面打包部署到類似 nginx 上，也就是沒有 node.js 作為頁(yè)面的呈現(xiàn)服務(wù)了，那么配置的 devServer 當(dāng)然也沒法有效了，但原理還是一致的，最后只需在 nginx 上配置轉(zhuǎn)發(fā)即可。

這是打包后部署服務(wù)器上的原理， 那我們部署在本地node服務(wù)原理也一樣，我們借助http-proxy-middleware來完成代理轉(zhuǎn)發(fā)。

• 安裝

  npm install http-proxy-middleware`
  

• 使用

  var { createProxyMiddleware } = require("http-proxy-middleware");
  app.use(
     "/api", // 需要代理接口路徑
     createProxyMiddleware({
        target: "", // 代理的域名
        changeOrigin: true,
        secure: false,
        onProxyReq: function (proxyReq, req, res, options) {
         if (req.body) {
           let bodyData = JSON.stringify(req.body);
           // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
           proxyReq.setHeader("Content-Type", "application/json");
           proxyReq.setHeader("Content-Length", Buffer.byteLength(bodyData));
           // stream the content
           proxyReq.write(bodyData);
         }
       },
     })
  );
  

• 運(yùn)行

  npm server
  

再會(huì)