vue.config.js里面的devserver如何配置

更新時間：2025年01月23日 10:56:37 作者：Flamingo_huohuo

本文介紹了vue.config.js中devServer的常見配置方式,包括基本配置、代理配置、熱模塊替換、靜態(tài)資源服務(wù)、HTTPS配置、多代理配置以及其他配置項,幫助開發(fā)者根據(jù)項目需求進(jìn)行定制

vue.config.js的devserver配置方式

以下是 vue.config.js 中 devServer 的常見配置方式，以及不同配置項的解釋和使用場景：

1. 基本配置

在 Vue 項目中，vue.config.js 是一個可選的配置文件，用于自定義 Vue CLI 的內(nèi)部 Webpack 配置。

以下是一個簡單的 devServer 配置示例：

module.exports = {
  devServer: {
    port: 8080, // 開發(fā)服務(wù)器的端口號
    open: true, // 項目啟動時自動打開瀏覽器
    overlay: {
      warnings: false,
      errors: true // 在瀏覽器中顯示錯誤信息
    }
  }
};

解釋：

port：指定開發(fā)服務(wù)器運行的端口號。如果不設(shè)置，默認(rèn)為 8080。
open：設(shè)置為 true 時，項目啟動時會自動打開瀏覽器并訪問開發(fā)服務(wù)器的頁面。
overlay：控制是否在瀏覽器頁面上覆蓋顯示警告和錯誤信息。將 errors 設(shè)置為 true 會在頁面上顯示編譯錯誤，方便開發(fā)時快速定位問題。

2. 代理配置

使用 devServer 配置代理是解決開發(fā)環(huán)境中跨域問題的常用方法。

假設(shè)你需要將 /api 開頭的請求代理到 http://localhost:3000 上的后端服務(wù)器，可以這樣配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目標(biāo)服務(wù)器地址
        changeOrigin: true, // 修改請求頭中的 Origin 信息
        pathRewrite: {
          '^/api': '' // 重寫請求路徑，將 /api 替換為空
        }
      }
    }
  }
};

解釋：

proxy：設(shè)置請求代理。
'/api'：匹配以 /api 開頭的請求路徑。
target：將請求代理到的目標(biāo)服務(wù)器地址。
changeOrigin：將請求頭中的 Origin 字段修改為目標(biāo)服務(wù)器的地址，有助于繞過某些服務(wù)器的同源策略限制。
pathRewrite：重寫請求路徑，這里將 /api 前綴去掉，使請求路徑符合后端 API 的實際情況。

3. 熱模塊替換（HMR）

啟用熱模塊替換可以在不刷新頁面的情況下更新代碼，提升開發(fā)體驗：

module.exports = {
  devServer: {
    hot: true, // 啟用熱模塊替換
    hotOnly: true // 只使用熱更新，不刷新頁面
  }
};

解釋：

hot：啟用熱模塊替換。
hotOnly：當(dāng)熱模塊替換失敗時，不刷新頁面，避免頁面刷新導(dǎo)致的數(shù)據(jù)丟失或狀態(tài)重置。

4. 靜態(tài)資源服務(wù)

可以配置 devServer 來處理靜態(tài)資源服務(wù)：

module.exports = {
  devServer: {
    contentBase: './public', // 靜態(tài)資源的目錄
    watchContentBase: true // 監(jiān)聽靜態(tài)資源目錄的變化
  }
};

解釋：

contentBase：指定靜態(tài)資源的目錄，默認(rèn)為 public 目錄。
watchContentBase：設(shè)置為 true 時，當(dāng)靜態(tài)資源目錄中的文件發(fā)生變化時，開發(fā)服務(wù)器會重新加載。

5. 啟用 HTTPS

如果需要在開發(fā)環(huán)境中使用 HTTPS，可以配置 devServer 如下：

const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync(path.join(__dirname, 'key.pem')), // 私鑰文件
      cert: fs.readFileSync(path.join(__dirname, 'cert.pem')) // 證書文件
    }
  }
};

解釋：

https：使用 HTTPS 協(xié)議，需要提供私鑰和證書文件。

6. 配置多個代理

如果你需要將不同的請求代理到不同的后端服務(wù)器，可以使用多個代理配置：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:3001',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:3002',
        changeOrigin: true
      }
    }
  }
};

7. 其他配置

還可以配置其他 devServer 選項，如 headers 用于設(shè)置響應(yīng)頭，compress 用于啟用 Gzip 壓縮：

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*' // 允許跨域請求
    },
    compress: true // 啟用 Gzip 壓縮
  }
};

心得：

vue.config.js 中的 devServer 配置項非常靈活，可以根據(jù)開發(fā)需求進(jìn)行各種定制。

以下是一個綜合的 vue.config.js 示例：

const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    hot: true,
    hotOnly: true,
    contentBase: './public',
    watchContentBase: true,
    https: {
      key: fs.readFileSync(path.join(__dirname, 'key.pem')),
      cert: fs.readFileSync(path.join(__dirname, 'cert.pem'))
    },
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    compress: true
  }
};