本地靜態(tài)部署，查看項目

一 安裝serve

npm i serve -g

打包

  • npm run build
  • serve -S dist
  • 此時發(fā)現(xiàn)請求跨越，所以用第二種引入中間件http-proxy-middleware(用于把請求代理轉(zhuǎn)發(fā)到其他服務(wù)器的中間件)方法來本地預(yù)覽

二 http-proxy-middleware

  • npm install --save-dev http-proxy-middleware
    image.png
//test-serve/app.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
const path = require('path');

// 托管了dist目錄，當(dāng)訪問 / 的時候，默認(rèn)會返回托管目錄的index.html文件
app.use(express.static(path.join(__dirname,'../dist')))

app.use('/boss', createProxyMiddleware({
  target: 'http://eduboss.lagou.com', 
  changeOrigin: true
}));

app.use('/front', createProxyMiddleware({
  target: 'http://edufront.lagou.com', 
  changeOrigin: true
}));

app.listen(3000);

對應(yīng)的vue.config.js里面配置如下

 devServer: {
    proxy: {
      '/boss': {
        target: 'http://eduboss.lagou.com',
        changeOrigin: true// 把請求頭中的 host 配置為 target
      },
      '/front': {
        target: 'http://edufront.lagou.com',
        changeOrigin: true // 把請求頭中的 host 配置為 target
      }
    }
  }
直接npm run preview

訪問localhost:3000就可以看到了
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容