Vue 프로젝트를 최적화하는 방법

이번에는 Vue 프로젝트를 최적화하는 방법과 Vue 프로젝트를 최적화하기 위한 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

Vue 유사 프로젝트 개발에서 프로젝트 구조는 기본적으로 Vue-cli에서 생성된 방법과 유사합니다. 이 개발 방법에서 가장 일반적으로 사용되는 모드는 모의 디버깅 또는 원격 디버깅을 위해 에이전트를 켜는 것입니다. Vue-cli를 사용하여 ProxyTable 구성을 설정하거나 Webpack-dev-server에서 제공하는 프록시 옵션을 직접 사용합니다. http-proxy 라이브러리를 사용하므로 특정 구성을 볼 수 있습니다.

https://github.com/nodejitsu/node-http-proxy#options

이러한 구성된 매개변수를 사용하면 보다 유연한 구성을 만들 수 있습니다. 더 나은 결과를 얻으세요

사용 요구 사항

로컬 개발이 현재 다음과 같은 상태에 있다고 가정합니다:

• 로컬 개발, 데이터는 로컬 모의 서버를 사용합니다

• 권한 인터페이스 관련 권한 인터페이스는 로컬 모의 데이터를 사용합니다. , 다른 모든 인터페이스는 지정된 원격 시스템을 사용합니다

• 권한 인터페이스는 로컬 모의 데이터를 사용하고 다른 데이터 하위 인터페이스는 다른 원격 시스템을 사용합니다

• 모든 인터페이스는 동일한 원격 시스템을 사용합니다

Scheme

먼저 고전적인 ProxyTable 작성 방법을 살펴보겠습니다.

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

changeOrigin 필드가 사용되며 주로 요청 헤더를 변경하는 데 사용됩니다. 요구 사항 개선:

• 로컬 개발: 대상은 로컬 호스트의 특정 포트를 가리킵니다. 호스트 확인은 절대 필요하지 않습니다

• 일부는 로컬이고 다른 하나는 고정 원격 시스템입니다. 대부분의 원격 주소는 확인해야 하는 로컬 호스트와 원격 주소를 구성해야 합니다. 호스트

• 둘과 동일하지만 머신에 여러 머신이 있음: 여러 머신을 수동으로 구성해야 합니다

• 동일한 원격 머신의 경우 이 시점에서 머신을 엄격하게 검증해야 할 수도 있습니다. , IP도 도메인 이름을 사용해야 하며 시스템 호스트를 사용하기 전에 구성해야 합니다

참고: 호스트를 엄격하게 확인하고 일반 확인 호스트 간의 주요 차이점은 엄격한 확인에서 요청된 URL은 다음과 같아야 한다는 것입니다. 요청된 헤더의 호스트 구현은 직접 수정할 수 없습니다. 즉, 도메인 이름은 시스템 호스트 수준에서 구성되어야 합니다.

구체적인 요구사항을 분석한 후 구현 방법 준비를 시작하세요. 원래 개발 방법은 npm run dev를 실행하는 것입니다. 명령줄 수준에서 구성을 추가해야 하는 경우 npm run dev --param=paramvalue로 설정해야 합니다. >. npm의 스크립트 스크립트를 사용하여 실행되는 명령의 경우

매개변수는 process.env를 통해 얻을 수 없으며 process.env.npm_config_paramName을 통해 얻을 수 있습니다. npm run dev，如果我们需要在命令行层面添加配置，就需要设置为 npm run dev --param=paramvalue 的方式。对于使用 npm 的 script 脚本执行的命令，
它参数的获取无法通过 process.env 获得，而且通过 process.env.npm_config_paramName 기성품을 사용하는 명령 line 매개변수 구문 분석 라이브러리는 그다지 편리하지는 않지만 문제를 해결하기 위해 당분간은 npm과 함께 제공되는 구문 분석을 사용합니다.

요청 시작 프로세스 중에 다음 매개변수가 필요합니다.

• host: 요청을 시작할 때 가리켜야 하는 호스트입니다. 각 컴퓨터마다 확인이 다를 수 있습니다.

• port: 에서 전달하는 포트입니다. 프록시

• 수신기: 사용 푸시의 원격 주소에는 IP 주소가 포함되어 있습니다. 문제를 방지하기 위해 IP 주소는 별도로 나열되지 않습니다. 그런 다음 구성을 위한 프록시 요청 사용자 정의 유형을 정의합니다.

local: 로컬 주소, 즉, localhost

• remote: 지정된 원격 시스템

• 기타 사용자 정의 유형: 구성 파일에 지정된 다른 유형에 사용됩니다.

• 'http://와 같은 요청의 원본 버전 xxx' 또는 개체 유형 구성을 사용하면 이 유형의 프록시는 처리되지 않습니다.

• 필요에 따라 프록시 지정 주소를 제어하기 위해 다음 매개변수를 추가합니다.

rd: 원격 시스템의 주소

1. focus: 엄격 모드, 모든 사용자 정의 유형 프록시는 지정된 rd 시스템으로 변환되며 rd 매개변수가 존재할 때만 사용할 수 있습니다.

2. allLocal: 사용자 정의 유형 프록시는 모두 로컬을 가리킵니다.

3. host: IP 주소 대신 호스트를 사용하세요

4. 요약 살펴보겠습니다(일련번호는 이전 요구 사항을 가리킵니다):

액세스를 위해 호스트를 사용해야 하는 상황: 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 等

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

redux-thunk实战项目案例详解

如何使用Angular数据绑定机制

위 내용은 Vue 프로젝트를 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!