Vue 项目代理设置的优化
Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式,这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试,也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server提供的 proxy 选项。它是采用了 http-proxy 库,所以具体配置可查看: 利用配置的这些参数我们可以做更为灵活的配置,达到更好的效果 使用需求假设我们本地开发目前以下几种状态:
方案先看下经典的proxyTable 写法: 其中用到了 changeOrigin 字段,主要是用于改变请求的 header。细化下需求:
说明:严格验证 host 和普通验证 host 区别主要在于严格验证时,请求的 url 必须是远程机器的域名, 不能直接修改请求的 header 的 host 实现,即必须在系统 host 层面配置好域名。 分析完成具体需求好,就开始准备实现的方式。原有开发方式是执行 请求发起过程中需要以下几个参数:
然后定义代理请求自定义类型,用于配置:
根据需要,我们添加以下几个参数用于控制代理指向地址:
总结一下(序号指向前面的需求):
remote 类型这么一看,貌似 host 是不需要的,它的存在主要是针对某些 机器可能需要使用 host 的方式,所以还是保留一下。 实现逻辑理清了就很简单了,配置文件设置为: proxyTable 配置方式 获取 proxyTable 的代码: {
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 启动命令: 注: 此时 proxyTable 中配置的 remote 全部转换为 local,在 allLocal 参数时将所有自定义类型转换为 local 本地 + 1 台远程启动命令: 注: --host 表示使用访问使用 host 而非 ip,使用时需要 host 地址 本地 + n 台远程host 配置:无 whistle 配置:默认的域名 127.0.0.1 dev1.example.com 127.0.0.1 dev2.example.com proxyTable 配置: 启动命令: 远程 1 台机器host 配置: whistle 配置:默认的域名 启动命令: 组件优化vue 的组件化深受大家喜爱,到底组件拆到什么程度算是合理,还要因项目大小而异,小型项目可以简单几个组件搞定,甚至不用 vuex,axios 等等,如果规模较大就要细分组件,越细越好,包括布局的封装,按钮,表单,提示框,轮播等,推荐看下 Element 组件库的代码,没时间写这么详细可以直接用 Element 库,分几点进行优化 •组件有明确含义,只处理类似的业务。复用性越高越好,配置性越强越好。 •自己封装组件还是遵循配置 props 细化的规则。 •组件分类,我习惯性的按照三类划分,page、page-item 和 layout,page 是路由控制的部分,page-item 属于 page 里各个布局块如 banner、side 等等,layout 里放置多个页面至少出现两次的组件,如 icon,scrollTop 等 总结细挖需求,可能还有更简单的方式,在大部分情况下能够减少代码修改,是 webpack 配置型的实现吧。当然,方式并不完美,尤其在 mac 下,居然不能支持 --rd xx 这种形式,可以有类似的库吧,后续可以做为深入的内容。 以上所述是小编给大家介绍的Vue 项目代理设置的优化。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |