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í)行自定義代碼
    }
  }
};

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

• 將開發(fā)服務(wù)器的端口號設(shè)置為 8080。
• 將開發(fā)服務(wù)器的主機名設(shè)置為 localhost。
• 禁用 HTTPS。
• 自動打開瀏覽器。
• 配置代理，將所有以 /api 開頭的請求代理到 http://localhost:3000。
• 啟用熱重載。
• 啟用 gzip 壓縮。
• 啟用 HTML5 歷史模式路由。
• 指定資源的公共路徑為根目錄。
• 禁用所有輸出信息。
• 將日志級別設(shè)置為 warning。
• 在瀏覽器中顯示編譯錯誤。
• 監(jiān)視文件的選項設(shè)置為默認值。
• 指定靜態(tài)文件的目錄為 ./public。
• 在服務(wù)器啟動之前和之后執(zhí)行自定義代碼。

您可以根據(jù)自己的需求來配置 devServer。這個示例僅僅是一個起點，您可以根據(jù)自己的需求進行修改和擴展。

到此這篇關(guān)于Vue3 跨域配置devServer的參數(shù)和設(shè)置的文章就介紹到這了,更多相關(guān)Vue3 跨域配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論