怎么在Vue項目中設(shè)置代理-創(chuàng)新互聯(lián)

怎么在Vue項目中設(shè)置代理？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為邳州等服務(wù)建站，邳州等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為邳州企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

使用需求

假設(shè)我們本地開發(fā)目前以下幾種狀態(tài)：

  • 本地開發(fā)，數(shù)據(jù)使用本地的 mock Server

  • 涉及權(quán)限接口使用本地 mock 數(shù)據(jù)，其他全部使用指定的一臺遠程機器

  • 涉及權(quán)限接口使用本地 mock 數(shù)據(jù)，其他數(shù)據(jù)分接口使用不同的遠程機器

  • 所有接口使用同一臺遠程機器

方案

先看下經(jīng)典的proxyTable 寫法：

proxyTable: {
 '/authui/': {
  target: target,
  changeOrigin: true
 },
 '/vendor/': {
  target: target,
  changeOrigin: true
 }
}

其中用到了 changeOrigin 字段，主要是用于改變請求的 header。細化下需求：

  • 本地開發(fā)：target 指向 localhost 的某個端口即可。至于 host 的驗證肯定是不需要的

  • 部分本地，其他固定的一臺遠程機器：需要配置 localhost 和遠程的地址，遠程地址多半是需要驗證 host 的

  • 同二，但機器有多臺：需要手動配置多臺機器

  • 同一臺遠程機器，此時機器可能要嚴(yán)格驗證，即 IP 也必須使用域名，配置好系統(tǒng) host 才可使用

說明：嚴(yán)格驗證 host 和普通驗證 host 區(qū)別主要在于嚴(yán)格驗證時，請求的 url 必須是遠程機器的域名，
不能直接修改請求的 header 的 host 實現(xiàn)，即必須在系統(tǒng) host 層面配置好域名。

分析完成具體需求好，就開始準(zhǔn)備實現(xiàn)的方式。原有開發(fā)方式是執(zhí)行 npm run dev，如果我們需要在命令行層面添加配置，就需要設(shè)置為 npm run dev --param=paramvalue 的方式。對于使用 npm 的 script 腳本執(zhí)行的命令，
它參數(shù)的獲取無法通過 process.env 獲得，而且通過 process.env.npm_config_paramName 的方式獲取，
使用現(xiàn)成的命令行參數(shù)解析庫也不是很方便，但為了省事，暫時還是使用 npm 自帶的解析。

請求發(fā)起過程中需要以下幾個參數(shù)：

  • host: 發(fā)起請求需要指向的 host，可能每臺機器驗證并不相同

  • port: 代理轉(zhuǎn)發(fā)的端口

  • receiver: 用于 push 的遠程地址，內(nèi)包含了 ip 地址，為了省事，沒有單獨列出 ip 地址

然后定義代理請求自定義類型，用于配置：

  • local: 本地地址，即 localhost

  • remote: 指定的遠程機器

  • 其他自定義類型：用于在配置文件中已經(jīng)指定的其他類型

  • 原版本的請求，如 'http://xxx' 或者 Object 類型的配置，此類代理永不處理

根據(jù)需要，我們添加以下幾個參數(shù)用于控制代理指向地址：

  1. rd: 遠程機器的地址

  2. focus: 嚴(yán)格模式，所有自定義類型的代理轉(zhuǎn)換為指定的 rd 機器，只在存在 rd 參數(shù)時可用

  3. allLocal：自定義類型代理全部指向本地

  4. host：請求發(fā)現(xiàn)是否使用 host，而不是 IP 地址

總結(jié)一下（序號指向前面的需求）：

  • 需要使用 host 進行訪問的情形：4

  • 需要更改 host：除 localhost 外都需要更改

  • 需要對已有類型進行轉(zhuǎn)換：1: 需要將所有自定義類型都轉(zhuǎn)換為 local, 2和3：什么也不轉(zhuǎn)換，4：所有的自定義類型全部轉(zhuǎn)換為

remote 類型

這么一看，貌似 host 是不需要的，它的存在主要是針對某些 機器可能需要使用 host 的方式，所以還是保留一下。

實現(xiàn)

邏輯理清了就很簡單了，配置文件設(shè)置為：

module.export = {
 rd1: {
  host: 'dev1.example.com',
  port: 8838,
  receiver: 'http://1.1.1.1:8888/receiver'
 },
 rd2: {
  host: 'dev2.example.com',
  port: 8838,
  receiver: 'http://1.1.1.1:8888/receiver'
 }
}

proxyTable 配置方式

{
 proxyTable: {
  '/api1': 'remote',
  '/api2': 'rd2',
  '/auth/xx': 'local',
  '/other': 'http://example.com'
 }
}

獲取 proxyTable 的代碼：

// 處理 proxyTable
const releaseConfig = require('../config/release.conf.js')
const rdConfig = releaseConfig[process.env.npm_config_rd]
const isAllRemote = process.env.npm_config_focus
const useHost = isAllRemote || process.env.npm_config_host
// 是否本機開發(fā)，本機開發(fā) remote 會指向 local
const isAllLocal = process.env.npm_config_allLocal
module.exports = function (proxy) {
 const localUrl = `http://localhost:${proxy.localProxyPort}`
 const defaultHost = proxy.defaultRdHost || 'dev-example.com'
 const localProxyPort = proxy.localProxyPort || 8787
 const finalConfig = formatReleaseConfig(releaseConfig)
 const remote = finalConfig.remote || {}
 if (process.env.npm_config_rd) {
  if (!rdConfig) {
   throw new TypeError('RD 機器名稱不存在，請在 config/release.conf.js 中進行配置')
  }
  if (!remote.ip) {
   throw new Error('請配置 rd 機器的 receiver')
  }
 }
 if (isAllRemote && !rdConfig) {
  throw new TypeError('focus 只能在提供了 rd 名稱后可設(shè)置')
 }
 function formatReleaseConfig (config) {
  const result = {}
  Object.keys(config).map((key) => {
   const value = config[key]
   const ipMatch = (value.receiver || '').match(/:\/\/(.*?):\d/)
   const ip = ipMatch && ipMatch[1]
   result[key] = {
    ip,
    host: value.host || defaultHost,
    port: value.port || '8391'
   }
  })
  // 設(shè)置 remote
  if (rdConfig) {
   const ipMatch = (rdConfig.receiver || '').match(/:\/\/(.*?):\d/)
   const ip = ipMatch && ipMatch[1]
   result.remote = {
    ip,
    host: rdConfig.host || defaultHost,
    port: rdConfig.port || '8391'
   }
  }
  // 設(shè)置 local
  result.local = {
   ip: 'localhost',
   host: 'localhost',
   port: localProxyPort
  }
  return result
 }
 function setProxy (proxyTable) {
  const result = {}
  Object.keys(proxyTable).forEach((api) => {
   let type = proxyTable[api]
   const isCustomType = typeof type === 'string' && !/^http/.test(type)
   if (isCustomType && type !== 'remote' && type !== 'local' && !finalConfig[type]) {
    throw new TypeError(`代理類型${type}不正確，請?zhí)峁?nbsp;http 或 https 類型的接口，或者指定正確的 release 機器名稱`)
   }
   if (type === 'remote' && !finalConfig.remote) {
    type = 'local'
   }
   if (isCustomType) {
    if (isAllRemote && type !== 'remote') {
     type = 'remote'
    }
    if (isAllLocal && type !== 'local') {
     type = 'local'
    }
   }
   const targetConfig = finalConfig[type]
   let target = type
   if (targetConfig) {
    target = {
     target: `http://${useHost ? targetConfig.host : targetConfig.ip}:${targetConfig.port}`,
     // 使用 host 時需要轉(zhuǎn)換，其他不需要轉(zhuǎn)換
     headers: {
      host: `${targetConfig.host}:${targetConfig.port}`
     }
    }
   }
   result[api] = target
  })
  return result
 }
 return {
  proxyTable: setProxy(proxy.proxyTable),
  host: remote.host || defaultHost
 }
}

用法

用法中需要配置兩種指向：系統(tǒng) host 和瀏覽器代理 Host。
之所以要兩種 host, 本質(zhì)上是因為接口使用的域名
和我們的本地訪問的域名是相同的，同一域名無法指向兩個地址，所以相當(dāng)于對瀏覽器端進行了攔截。
系統(tǒng) host 推薦使用 switchHost 進行切換，瀏覽器推薦使用 whistle 進行切換。

本地開發(fā)

host 配置：無
whistle 配置：默認(rèn)的域名

127.0.0.1 dev.example.com

啟動命令：

npm run dev
npm run dev --allLocal

注： 此時 proxyTable 中配置的 remote 全部轉(zhuǎn)換為 local，在 allLocal 參數(shù)時將所有自定義類型轉(zhuǎn)換為 local

本地 + 1 臺遠程

host 配置：無
whistle 配置：默認(rèn)的域名
127.0.0.1 dev1.example.com
127.0.0.1 dev2.example.com

啟動命令：

npm run dev --rd=rd1
npm run dev --rd=rd1 --host

注： --host 表示使用訪問使用 host 而非 ip，使用時需要 host 地址

本地 + n 臺遠程

host 配置：無

whistle 配置：默認(rèn)的域名

127.0.0.1 dev1.example.com

127.0.0.1 dev2.example.com

{
 proxyTable: {
  '/api1': 'rd1',
  '/api2': 'rd2',
  '/auth/xx': 'local',
  '/other': 'http://example.com'
 }
}

proxyTable 配置：

啟動命令：

npm run dev

遠程 1 臺機器

host 配置：

1.1.1.1 dev1.example.com
1.1.1.1 dev2.example.com

whistle 配置：默認(rèn)的域名

127.0.0.1 dev1.example.com
127.0.0.1 dev2.example.com

啟動命令：

npm run dev --rd=rd1 --focus

組件優(yōu)化

vue 的組件化深受大家喜愛，到底組件拆到什么程度算是合理，還要因項目大小而異，小型項目可以簡單幾個組件搞定，甚至不用 vuex，axios 等等，如果規(guī)模較大就要細分組件，越細越好，包括布局的封裝，按鈕，表單，提示框，輪播等，推薦看下 Element 組件庫的代碼，沒時間寫這么詳細可以直接用 Element 庫，分幾點進行優(yōu)化

?組件有明確含義，只處理類似的業(yè)務(wù)。復(fù)用性越高越好，配置性越強越好。

?自己封裝組件還是遵循配置 props 細化的規(guī)則。

?組件分類，我習(xí)慣性的按照三類劃分，page、page-item 和 layout，page 是路由控制的部分，page-item 屬于 page 里各個布局塊如 banner、side 等等，layout 里放置多個頁面至少出現(xiàn)兩次的組件，如 icon, scrollTop 等

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：怎么在Vue項目中設(shè)置代理-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://bm7419.com/article42/cdggec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站設(shè)計、網(wǎng)站營銷、移動網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)