Vue3跨域配置devServer參數的方法是什麼

devServer 是用來設定開發伺服器的選項物件。它可以用來配置伺服器的各種選項，例如代理，連接埠號，HTTPS 等。

以下是一些常用的 devServer 參數和設定：

• port：指定開發伺服器的連接埠號碼，默認為 8080。

• host：指定開發伺服器的主機名，預設為 localhost。

• https：開啟 HTTPS，可以傳入一個 Object 類型的參數，用於設定 HTTPS 選項。

• open：自動開啟瀏覽器，預設為 false。可以傳入一個 String 類型的參數，用來指定瀏覽器的名稱。

• proxy：用於設定代理程式。可以傳入一個 Object 類型的參數，用於設定代理選項。

• hot：啟用熱重載，預設為 true。

• compress：啟用 gzip 壓縮。

• historyApiFallback：啟用 HTML5 歷史模式路由。當瀏覽器存取的路徑不存在時，將返回 index.html 文件，而不是 404 頁面。

• publicPath：指定資源的公共路徑，可以是相對路徑或絕對路徑。

• quiet：停用所有輸出資訊。

• clientLogLevel：指定在瀏覽器控制台中顯示的日誌級別，預設為 info。

• overlay：在瀏覽器中顯示編譯錯誤。

• watchOptions：用於設定監視檔案的選項。

• contentBase：指定靜態檔案的目錄，預設為專案根目錄。

• before 和 after：在伺服器啟動前或之後執行自訂程式碼。

下面是一個 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) {
      // 在服务器启动之前执行自定义代码
    },
    after: function(app) {
      // 在服务器启动之后执行自定义代码
    }
  }
};

在這個範例中，我們做了以下設定：

• #將開發伺服器的連接埠號碼設定為 8080。

• 將開發伺服器的主機名稱設定為 localhost。

• 停用 HTTPS。

• 自動開啟瀏覽器。

• 設定代理，將所有以 /api 開頭的請求代理到 http://localhost:3000。

• 啟用熱重載。

• 啟用 gzip 壓縮。

• 啟用 HTML5 歷史模式路由。

• 指定資源的公共路徑為根目錄。

• 停用所有輸出資訊。

• 將日誌等級設定為 warning。

• 在瀏覽器中顯示編譯錯誤。

• 監視檔案的選項設定為預設值。

• 指定靜態檔案的目錄為 ./public。

• 在伺服器啟動之前和之後執行自訂程式碼。

您可以依照自己的需求來設定 devServer。這個範例只是一個起點，您可以根據自己的需求進行修改和擴展。

以上是Vue3跨域配置devServer參數的方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！