ホームページ  >  記事  >  ウェブフロントエンド  >  vue+resolveを最適化する方法

vue+resolveを最適化する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-17 15:16:271655ブラウズ

今回は、vue+resolve を最適化する方法と、vue+resolve を最適化するための 注意点 について説明します。以下は実際のケースです。見てみましょう。

vue-cli を通じて vue+webpack プロジェクトを作成する場合、その多くはすでに構成されていますが、開発を容易にするためにパスを最適化できます。

1.resolve.extensions

webpack.base.conf.js では、以下に示すように、拡張子が

array である解決設定を確認できます。 この構成により、コンポーネント内の routing

を介してコンポーネントを適用するときに、次のように適用するのがより便利になります:

extensions: ['.js', '.vue', '.json'],
つまり、拡張子を使用しない場合は、Hello.vue コンポーネントを参照するために .vue サフィックスを追加する必要はありません。このファイルを導入するために @components/Hello.vue を使用する必要があります。

2.resolve.alias

コンポーネントが相互に参照する場合、次のようになります:

import Hello from '@components/Hello';
パスは現在のページからの相対パスです。 ただし、ネストが複雑になると、記述するのがさらに面倒になります。しかし、次のような設定を渡すと:
import Hello from '../src.components/Hello';
このうち、vue$ は vue を導入することを意味し、次のように記述できます:

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@pages': path.join(dirname, "..", "src", "pages"),
   "@components": path.join(dirname, "..", "src", "components"),
   // 注意: 静态资源通过src,不能这么设置。
   // "@assets": path.join(dirname, "..", "src", "assets"),
  }
さらに、@pages と @components を直接引用できるため、多くの複雑なアプリケーションを排除でき、さらに @ によって曖昧さを排除できます。以下に示すように:

import Vue from 'vue'
import Hello from '@components/Hello';
注目に値します: webpack.config.js では、../ と ./ のパス メソッドは使用できません。代わりに、path.join と dirname を使用してパスを表します。そうしないと、エラーが報告されます。

さらに: コンポーネントでは、いくつかの静的ファイル、つまり

static

の下のファイルを参照します。現時点では、エイリアスの下での設定は使用できませんが、一般的な設定方法を使用する必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:


以上がvue+resolveを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。