001 vue.config相關

一曲微茫發表於2024-10-30
Vue

const proxyURL = require("./src/common/proxy-config").proxyURL;
const baseURL = require('./src/common/proxy-config').baseURL;
const path = require('path');

function resolve(dir) {
return path.join(__dirname, dir);
}

module.exports = {
assetsDir: "static",
productionSourceMap: false,
devServer: {
host: '0.0.0.0',
port: 8890, // 埠號
proxy: {
[baseURL]: {
target: proxyURL,
changeOrigin: true,
autoRewrite: true,
},
},
},
};
當然，下面是對這段 vue.config.js 配置檔案的詳細分析，包括每個部分的作用和實現邏輯。

1. 引入模組和變數

const proxyURL = require("./src/common/proxy-config").proxyURL;
const baseURL = require('./src/common/proxy-config').baseURL;
const path = require('path');

  • proxyURL 和 baseURL：

    • 這兩個變數是從 ./src/common/proxy-config 模組中匯入的。假設 proxy-config.js 檔案內容如下：
      module.exports = {
  proxyURL: 'http://api.example.com',
  baseURL: '/api'
};
    • proxyURL 是目標伺服器的 URL，例如 http://api.example.com。
    • baseURL 是需要代理的路徑字首，例如 /api。

  • path 模組：

    • path 是 Node.js 的內建模組，用於處理和轉換檔案路徑。

2. 輔助函式 resolve

function resolve(dir) {
  return path.join(__dirname, dir);
}
  • resolve 函式：
    • 這個函式用於將相對路徑轉換為絕對路徑。
    • __dirname 是 Node.js 的全域性變數，表示當前模組的目錄名。
    • path.join(__dirname, dir) 將當前模組的目錄名與傳入的相對路徑 dir 連線起來，生成一個絕對路徑。

3. 配置物件 module.exports

module.exports = {
  assetsDir: "static",
  productionSourceMap: false,
  devServer: {
    host: '0.0.0.0',
    port: 8890, // 埠號
    proxy: {
      [baseURL]: {
        target: proxyURL,
        changeOrigin: true,
        autoRewrite: true,
      },
    },
  },
};

  • assetsDir: "static"：

    • 指定生成的靜態資源目錄為 static。這意味著在構建專案時，所有的靜態資源（如圖片、字型等）將會被放置在 dist/static 目錄下。

  • productionSourceMap: false：

    • 生產環境下不生成 source map。source map 用於除錯，但在生產環境中生成 source map 會增加打包體積和構建時間，通常不需要。

  • devServer：

    • 配置開發伺服器的設定。
    • host: '0.0.0.0'：
      • 允許外部裝置透過區域網訪問開發伺服器。0.0.0.0 表示監聽所有網路介面。
    • port: 8890：
      • 開發伺服器執行的埠號為 8890。
    • proxy：
      • 配置代理，用於解決開發環境下的跨域問題。
      • [baseURL]：
        • 動態生成代理路徑。baseURL 是一個變數，假設其值為 /api，則代理配置為 { '/api': { ... } }。
      • target: proxyURL：
        • 目標伺服器的 URL。假設 proxyURL 的值為 http://api.example.com，則所有匹配 /api 的請求都會被代理到 http://api.example.com。
      • changeOrigin: true：
        • 改變請求頭中的 host 為 target。這有助於解決跨域問題，因為目標伺服器會認為請求來自同一個域名。
      • autoRewrite: true：
        • 自動重寫路徑。如果目標伺服器返回的響應中包含相對路徑，這些路徑會被自動重寫為代理路徑。

總結

這段 vue.config.js 配置檔案的主要作用是：

  1. 引入必要的模組和變數：從 proxy-config.js 檔案中匯入 proxyURL 和 baseURL，並引入 path 模組。
  2. 定義輔助函式：resolve 函式用於將相對路徑轉換為絕對路徑。
  3. 配置開發伺服器：
    • 指定靜態資源目錄。
    • 關閉生產環境下的 source map。
    • 配置開發伺服器的主機和埠。
    • 設定代理，解決開發環境下的跨域問題。

透過這些配置，你可以確保在開發過程中能夠順利地訪問後端 API，而無需擔心跨域問題。

相關文章