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

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

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

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

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

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

下面是一個(gè) 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ù)器啟動(dòng)之前執(zhí)行自定義代碼
    },
    after: function(app) {
      // 在服務(wù)器啟動(dòng)之后執(zhí)行自定義代碼
    }
  }
};

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