Vue パス最適化における解決の詳細な説明

vue-cli を通じて vue+webpack プロジェクトを作成する場合、その多くはすでに構成されていますが、開発を容易にするためにパスを最適化できます。この記事では、主に Vue のパス最適化の解決策を紹介します。これが非常に優れていると思いますので、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1.solve.extensions

webpack.base.conf.js では、以下に示すように、extensions が配列である解決設定を確認できます。ルートを介してコンポーネントにコンポーネントを適用すると、次のようにより便利に適用できます。

extensions: ['.js', '.vue', '.json'],

つまり、拡張子が使用されていない場合は、.vue 接尾辞を追加せずに Hello.vue コンポーネントを参照できます。 @components/Hello.vue を使用してこのファイルを紹介します。

2.solve.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 の下のファイルを参照します。現時点では、エイリアスの下での設定は使用できませんが、一般的な設定方法を使用する必要があります。

関連する推奨事項:

MySql は、skip-name-resolve を使用して、外部ネットワーク接続クライアントが遅すぎる問題を解決します

以上がVue パス最適化における解決の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。