这次给大家带来Vue如何优化项目代理,Vue优化项目代理的注意事项有哪些,下面就是实战案例,一起来看一下。
Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式,这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试,也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server提供的 proxy 选项。它是采用了 http-proxy 库,所以具体配置可查看:
https://github.com/nodejitsu/node-http-proxy#options
利用配置的这些参数我们可以做更为灵活的配置,达到更好的效果
使用需求
假设我们本地开发目前以下几种状态:
本地开发,数据使用本地的 mock Server
涉及权限接口使用本地 mock 数据,其他全部使用指定的一台远程机器
涉及权限接口使用本地 mock 数据,其他数据分接口使用不同的远程机器
所有接口使用同一台远程机器
方案
先看下经典的proxyTable 写法:
proxyTable: { '/authui/': { target: target, changeOrigin: true }, '/vendor/': { target: target, changeOrigin: true } }
其中用到了 changeOrigin 字段,主要是用于改变请求的 header。细化下需求:
本地开发:target 指向 localhost 的某个端口即可。至于 host 的验证肯定是不需要的
部分本地,其他固定的一台远程机器:需要配置 localhost 和远程的地址,远程地址多半是需要验证 host 的
同二,但机器有多台:需要手动配置多台机器
同一台远程机器,此时机器可能要严格验证,即 IP 也必须使用域名,配置好系统 host 才可使用
说明:严格验证 host 和普通验证 host 区别主要在于严格验证时,请求的 url 必须是远程机器的域名,
不能直接修改请求的 header 的 host 实现,即必须在系统 host 层面配置好域名。
分析完成具体需求好,就开始准备实现的方式。原有开发方式是执行 npm run dev
,如果我们需要在命令行层面添加配置,就需要设置为 npm run dev --param=paramvalue
的方式。对于使用 npm 的 script
脚本执行的命令,
它参数的获取无法通过 process.env 获得,而且通过 process.env.npm_config_paramName
的方式获取,
使用现成的命令行参数解析库也不是很方便,但为了省事,暂时还是使用 npm 自带的解析。
请求发起过程中需要以下几个参数:
host: 发起请求需要指向的 host,可能每台机器验证并不相同
port: 代理转发的端口
receiver: 用于 push 的远程地址,内包含了 ip 地址,为了省事,没有单独列出 ip 地址
然后定义代理请求自定义类型,用于配置:
local: 本地地址,即 localhost
remote: 指定的远程机器
其他自定义类型:用于在配置文件中已经指定的其他类型
原版本的请求,如 'http://xxx' 或者 Object 类型的配置,此类代理永不处理
根据需要,我们添加以下几个参数用于控制代理指向地址:
rd: 远程机器的地址
focus: 严格模式,所有自定义类型的代理转换为指定的 rd 机器,只在存在 rd 参数时可用
allLocal:自定义类型代理全部指向本地
host:请求发现是否使用 host,而不是 IP 地址
总结一下(序号指向前面的需求):
需要使用 host 进行访问的情形:4
需要更改 host:除 localhost 外都需要更改
需要对已有类型进行转换:1: 需要将所有自定义类型都转换为 local, 2和3:什么也不转换,4:所有的自定义类型全部转换为
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 的代码:
// 处理 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 // 是否本机开发,本机开发 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 名称后可设置') } 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 dev npm run dev --allLocal
注: 此时 proxyTable 中配置的 remote 全部转换为 local,在 allLocal 参数时将所有自定义类型转换为 local
本地 + 1 台远程
host 配置:无 whistle 配置:默认的域名 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 配置:默认的域名
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 配置:默认的域名
127.0.0.1 dev1.example.com 127.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 这种形式,可以有类似的库吧,后续可以做为深入的内容。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Vue如何优化项目代理的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

Atom编辑器mac版下载
最流行的的开源编辑器

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境