Vue プロジェクトを最適化する方法

今回は、Vue プロジェクトを最適化する方法と、Vue プロジェクトを最適化する際の注意点について説明します。以下は実際のケースです。見てみましょう。

Vue に似たプロジェクトの開発におけるプロジェクト構造は、基本的に Vue-cli によって生成される方法と似ています。この開発方法では、最も一般的に使用されるモードは、模擬デバッグまたはリモート デバッグのためにエージェントを有効にすることです。 Vue-cli を使用して構成 proxyTable を設定するか、Webpack-dev-server によって提供されるプロキシ オプションを直接使用します。 http-proxy ライブラリを使用するため、特定の設定を表示できます:

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

これらの設定されたパラメータを使用すると、より柔軟な設定を行うことができます。より良い結果を達成する

使用要件

ローカル開発が現在次のステータスにあると仮定します:

• ローカル開発、データはローカルモックサーバーを使用します

• 関与する権限インターフェイスはローカルモックデータを使用します他のすべては指定されたリモート マシンを使用します

• パーミッション インターフェイスはローカルのモック データを使用し、他のデータ サブインターフェイスは異なるリモート マシンを使用します

• すべてのインターフェイスは同じリモート マシンを使用します

スキーム

まず古典的な proxyTable の記述方法を見てみましょう:

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

changeOrigin フィールドが使用されます。これは主にリクエストのヘッダーを変更するために使用されます。要件の洗練:

• ローカル開発: ターゲットはローカルホストの特定のポートを指します。ホストの検証に関しては、絶対に必要ありません

• 一部はローカルで、もう 1 つは固定リモート マシンです。ローカルホストとリモート アドレスを設定する必要があります。ほとんどのリモート アドレスは検証する必要があります。ホスト

• 2 つと同じですが、マシンには複数のマシンがあります: 複数のマシンを手動で構成する必要があります

• 同じリモート マシンの場合、現時点ではマシンを厳密に検証する必要がある場合があります。 、IP もドメイン名を使用する必要があり、使用する前にシステム ホストを構成する必要があります

注: ホストを厳密に検証します。通常の検証ホストとの主な違いは、厳密な検証では、要求された URL が要求されたヘッダーのホスト実装は直接変更できません。つまり、ドメイン名はシステム ホスト レベルで構成する必要があります。

特定の要件を分析して完了したら、それらを実装する方法の準備を開始します。元の開発方法は、npm run dev を実行することです。コマンド ライン レベルで構成を追加する必要がある場合は、それを npm run dev --param=paramvalue に設定する必要があります。 >。 npm の script スクリプトを使用して実行されるコマンドの場合、

パラメーターは 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 アドレスが含まれています。次に、設定用のプロキシ リクエストのカスタム タイプを定義します。

ローカル アドレス。つまり、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 中国語 Web サイトの他の関連記事を参照してください。