使用場景

在前端開發過程中，可能會要對發佈到生產的包做驗證或者要本地運行一個開源的包的實例，這時候就需要在本地啓動一個前端服務，一般有以下兩種方式

運行方式

Live-Server

通過VsCode去安裝插件LiveServer，然後打開靜態工程，點擊右下角的Live Server按鈕 即可運行工程

• 優點：使用簡單，方便快捷
• 缺點：不支持自定義配置，如工程裏面需要代理請求，則無法實現

express

使用express結合http-proxy-middleware來代理請求運行靜態工程

1. 在項目根目錄 運行命令,初始化工程

npm init -y

2. 然後安裝庫nodemon、express、http-proxy-middleware、mime-types

npm i nodemon express http-proxy-middleware mime-types -D

3. 編寫入口文件app.js

const express = require('express')
const path = require('path')
const mine = require('mime-types')
const { createProxyMiddleware } = require('http-proxy-middleware')
const app = express();
const gateWayProxy = createProxyMiddleware('/api', {
    target: 'http://172.18.0.197',// 設置要代理的目標服務器
    changeOrigin: true, //  啓用跨域
    // pathRewrite: {
    // '^/api': '',// 將請求路徑中的'/api'替換為空白
    // },
});
// 使用代理中間件
app.use(gateWayProxy);
// 使用靜態文件中間件處理靜態文件請求
app.use(express.static(path.join(__dirname), {
    setHeaders: (res, path) => {
        // 根據文件擴展名設置正確的 MIME 類型
        const mimeType = mine.lookup(path);
        // console.log(mimeType)
        if (mimeType) {
            res.setHeader('Content-Type', mimeType);
        }
    }
}))

// 處理根路徑請求，發送index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
})

const port = 3001;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

4. 在package.json文件中的scripts節點中添加運行腳本

   {
    "scripts":{
        "dev":"nodemon app.js"
    }
   }

5. 執行命令，啓動靜態工程

   npm run serve