Vue3?跨域配置devServer的參數(shù)和設(shè)置方法

更新時間：2023年04月21日 11:15:05 作者：城南城南

這篇文章主要介紹了Vue3?跨域配置devServer的參數(shù)和設(shè)置,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

devServer 是一個用于配置開發(fā)服務(wù)器的選項對象。它可以用來配置服務(wù)器的各種選項，例如代理，端口號，HTTPS 等。

以下是一些常用的 devServer 參數(shù)和設(shè)置：

port：指定開發(fā)服務(wù)器的端口號，默認為 8080。
host：指定開發(fā)服務(wù)器的主機名，默認為 localhost。
https：開啟 HTTPS，可以傳入一個 Object 類型的參數(shù)，用于配置 HTTPS 選項。
open：自動打開瀏覽器，默認為 false?？梢詡魅胍粋€ String 類型的參數(shù)，用于指定瀏覽器的名稱。
proxy：用于配置代理?？梢詡魅胍粋€ Object 類型的參數(shù)，用于配置代理選項。
hot：啟用熱重載，默認為 true。
compress：啟用 gzip 壓縮。
historyApiFallback：啟用 HTML5 歷史模式路由。當(dāng)瀏覽器訪問的路徑不存在時，將返回 index.html 文件，而不是 404 頁面。
publicPath：指定資源的公共路徑，可以是一個相對路徑或絕對路徑。
quiet：禁用所有輸出信息。
clientLogLevel：指定在瀏覽器控制臺中顯示的日志級別，默認為 info。
overlay：在瀏覽器中顯示編譯錯誤。
watchOptions：用于配置監(jiān)視文件的選項。
contentBase：指定靜態(tài)文件的目錄，默認為項目根目錄。
before 和 after：在服務(wù)器啟動之前或之后執(zhí)行自定義代碼。

下面是一個 devServer 的配置示例：

// vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    host: 'localhost',
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    },
    hot: true,
    compress: true,
    historyApiFallback: true,
    publicPath: '/',
    quiet: true,
    clientLogLevel: 'warning',
    overlay: true,
    watchOptions: {
      poll: false
    },
    contentBase: './public',
    before: function(app) {
      // 在服務(wù)器啟動之前執(zhí)行自定義代碼
    },
    after: function(app) {
      // 在服務(wù)器啟動之后執(zhí)行自定義代碼
    }
  }
};

在這個示例中，我們做了以下配置：