vue全家桶進階之路48：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，這個示例僅僅是一個起點，您可以根據自己的需求進行修改和擴展，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550811.html

標籤：其他

上一篇：【資料中臺商業化】資料中臺微前端實踐

下一篇：返回列表