Vue 项目代理设置的优化

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

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: {
  '/api1': 'remote',
  '/api2': 'rd2',
  '/auth/xx': 'local',
  '/other': 'http://example.com'
 }
}

// 处理 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(/:\/\/(.*"htmlcode">

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 库，分几点进行优化
"color: #ff0000">总结
细挖需求，可能还有更简单的方式，在大部分情况下能够减少代码修改，是 webpack 配置型的实现吧。当然，方式并不完美，尤其在 mac 下，居然不能支持 --rd xx 这种形式，可以有类似的库吧，后续可以做为深入的内容。
以上所述是小编给大家介绍的Vue 项目代理设置的优化，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！