Vue 類的項目開發中項目結構基本都是類似于 Vue-cli 生成的方式，這種方式開發中，最常用到的模式是開啟代理進行 mock 調試或遠程調試，也就是使用了 Vue-cli 設置的配置 proxyTable 或者直接使用 Webpack-dev-server提供的 proxy 選項。它是采用了 http-proxy 庫，所以具體配置可查看：
https://github.com/nodejitsu/node-http-proxy#options
利用配置的這些參數我們可以做更為靈活的配置，達到更好的效果
使用需求
假設我們本地開發目前以下幾種狀態：
方案
先看下經典的proxyTable 寫法：
proxyTable: { '/authui/': { target: target, changeOrigin: true }, '/vendor/': { target: target, changeOrigin: true }}其中用到了 changeOrigin 字段，主要是用于改變請求的 header。細化下需求：
說明：嚴格驗證 host 和普通驗證 host 區別主要在于嚴格驗證時，請求的 url 必須是遠程機器的域名，
不能直接修改請求的 header 的 host 實現，即必須在系統 host 層面配置好域名。
分析完成具體需求好，就開始準備實現的方式。原有開發方式是執行 npm run dev，如果我們需要在命令行層面添加配置，就需要設置為 npm run dev --param=paramvalue 的方式。對于使用 npm 的 script 腳本執行的命令，
它參數的獲取無法通過 process.env 獲得，而且通過 process.env.npm_config_paramName 的方式獲取，
使用現成的命令行參數解析庫也不是很方便，但為了省事，暫時還是使用 npm 自帶的解析。
請求發起過程中需要以下幾個參數：
然后定義代理請求自定義類型，用于配置：
根據需要，我們添加以下幾個參數用于控制代理指向地址：
總結一下（序號指向前面的需求）：
remote 類型
這么一看，貌似 host 是不需要的，它的存在主要是針對某些 機器可能需要使用 host 的方式，所以還是保留一下。
實現
邏輯理清了就很簡單了，配置文件設置為：
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 的代碼：
// 處理 proxyTableconst releaseConfig = require('../config/release.conf.js')const rdConfig = releaseConfig[process.env.npm_config_rd]const isAllRemote = process.env.npm_config_focusconst useHost = isAllRemote || process.env.npm_config_host// 是否本機開發，本機開發 remote 會指向 localconst isAllLocal = process.env.npm_config_allLocalmodule.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 名稱后可設置') } 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' } }) // 設置 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' } } // 設置 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}不正確，請提供 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 時需要轉換，其他不需要轉換 headers: { host: `${targetConfig.host}:${targetConfig.port}` } } } result[api] = target }) return result } return { proxyTable: setProxy(proxy.proxyTable), host: remote.host || defaultHost }}用法
用法中需要配置兩種指向：系統 host 和瀏覽器代理 Host。
之所以要兩種 host, 本質上是因為接口使用的域名
和我們的本地訪問的域名是相同的，同一域名無法指向兩個地址，所以相當于對瀏覽器端進行了攔截。
系統 host 推薦使用 switchHost 進行切換，瀏覽器推薦使用 whistle 進行切換。
本地開發
host 配置：無
whistle 配置：默認的域名
127.0.0.1 dev.example.com
啟動命令：
npm run devnpm run dev --allLocal
注： 此時 proxyTable 中配置的 remote 全部轉換為 local，在 allLocal 參數時將所有自定義類型轉換為 local
本地 + 1 臺遠程
host 配置：無whistle 配置：默認的域名127.0.0.1 dev1.example.com127.0.0.1 dev2.example.com
啟動命令：
npm run dev --rd=rd1npm run dev --rd=rd1 --host
注： --host 表示使用訪問使用 host 而非 ip，使用時需要 host 地址
本地 + n 臺遠程
host 配置：無
whistle 配置：默認的域名
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.com1.1.1.1 dev2.example.com
whistle 配置：默認的域名
127.0.0.1 dev1.example.com127.0.0.1 dev2.example.com
啟動命令：
npm run dev --rd=rd1 --focus
組件優化
vue 的組件化深受大家喜愛，到底組件拆到什么程度算是合理，還要因項目大小而異，小型項目可以簡單幾個組件搞定，甚至不用 vuex，axios 等等，如果規模較大就要細分組件，越細越好，包括布局的封裝，按鈕，表單，提示框，輪播等，推薦看下 Element 組件庫的代碼，沒時間寫這么詳細可以直接用 Element 庫，分幾點進行優化
•組件有明確含義，只處理類似的業務。復用性越高越好，配置性越強越好。
•自己封裝組件還是遵循配置 props 細化的規則。
•組件分類，我習慣性的按照三類劃分，page、page-item 和 layout，page 是路由控制的部分，page-item 屬于 page 里各個布局塊如 banner、side 等等，layout 里放置多個頁面至少出現兩次的組件，如 icon, scrollTop 等
總結
細挖需求，可能還有更簡單的方式，在大部分情況下能夠減少代碼修改，是 webpack 配置型的實現吧。當然，方式并不完美，尤其在 mac 下，居然不能支持 --rd xx 這種形式，可以有類似的庫吧，后續可以做為深入的內容。
以上所述是小編給大家介紹的Vue 項目代理設置的優化，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
