vue cli 3 デプロイメントリソースパス

Vue CLI 3 は、Vue.js によって公式に提供されている Webpack をベースにしたスキャフォールディング ツールで、Vue.js プロジェクトを迅速に構築するために使用されます。大規模アプリケーションにおける Vue.js の人気に伴い、Vue CLI 3 もフロントエンド開発に不可欠な部分になりました。ただし、実際に Vue CLI 3 プロジェクトをデプロイする場合、多くの開発者はリソース パスの問題に遭遇し、プロジェクトが正常に実行できなくなります。この記事では、Vue CLI 3 デプロイメント リソース パスの問題と解決策を詳しく紹介します。

1. Vue CLI 3 のデフォルトのリソース パス

Vue CLI 3 のデフォルトのリソース パスは相対パス、つまり「./」です。これは、Vue CLI 3 がリソース ファイル (画像、CSS、JS など) が配置されているディレクトリを自動的に識別し、それらを相対パスにコンパイルして、どのような環境でも正しくアクセスできるようにすることを意味します。

2. 問題の発生

Vue CLI 3 のデフォルトのリソース パスは非常に便利に見えますが、実際のアプリケーションではまだいくつかの問題が発生します。よくある問題の 1 つは、パッケージ化されたリソースのパスが正しくないため、Web ページが正しく表示されないことです。この問題は通常、プロジェクトが異なるパスを持つ異なる環境にデプロイされていることが原因で発生します。

たとえば、Vue CLI 3 プロジェクトがサーバーのルート ディレクトリにデプロイされている場合、そのリソース パスは「/static/example.png」である必要があります。ただし、Vue CLI 3 プロジェクトがサーバー上のサブディレクトリにデプロイされている場合、そのリソース パスは「/subdir/static/example.png」になります。このとき、Vue CLI 3 のデフォルトの相対パスを使用すると、リソース ファイルが正しく読み込めず、Web ページが正しく表示されません。

3. 解決策

リソース パスの問題を解決するために、Vue CLI 3 はリソース パスを設定するさまざまな方法を提供します。実際のニーズに応じて、問題を解決する方法の 1 つを選択できます。

1. publicPath パラメーターを使用する

vue.config.js ファイルで、publicPath パラメーターを使用してリソース パスを設定できます。 publicPath パラメーターは、パッケージ化されたリソース ファイルの相対パスを指定します。これは、絶対パスまたは相対パスのいずれかになります。例:

module.exports = {
  publicPath: '/subdir/'
};

上記のコードは、すべてのリソース ファイル パスに「/subdir/」プレフィックスを追加します。これにより、対応するリソース ファイルがサブディレクトリにデプロイされている場合でも正しくロードできるようになります。

2. 環境変数の使用

シナリオによっては、さまざまなデプロイ環境に応じてリソース パスを動的に変更する必要がある場合があります。現時点では、環境変数を使用して問題を解決できます。

vue.config.js 構成ファイルでは、process.env.NODE_ENV 環境変数を使用して、現在のプロジェクトの環境を決定できます。開発環境では、リソース パスを相対パスに設定できます。運用環境では、プロジェクトがさまざまな環境で対応するリソース ファイルを正しく読み込めるように、リソース パスを絶対パスに設定できます。例:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-website/'
    : '/'
};

上記のコードでは、プロジェクトが運用環境にある場合、リソース パスは「/my-website/」ですが、それ以外の場合は相対パスです。

3. CDN の使用

トラフィックの多いプロジェクトでは、リソース ファイルの読み込みを高速化するために CDN を使用する必要があります。現時点では、Vue CLI 3 によって提供される Webpack 構成を使用して CDN パスを設定できます。 vue.config.js では、chainWebpack メソッドを通じて Webpack 構成をカスタマイズできます。例:

module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].cdn = 'https://cdn.example.com/';
        return args;
      });
  }
};

上記のコードでは、chainWebpack メソッドを使用して Webpack 構成をカスタマイズし、html-webpack-plugin プラグインの構成パラメーターの cdn 属性を、 CDN「https://cdn.example.com/」。

4. 概要

Vue CLI 3 は、Vue.js プロジェクトを迅速に構築できる強力なスキャフォールディング ツールです。ただし、実際のアプリケーションでは、Vue CLI 3 のデフォルトのリソース パスに問題があり、プロジェクトが適切に実行されない可能性があります。この問題を解決するには、publicPath パラメーターを設定するか、環境変数を使用するか、CDN を使用してリソース パスをカスタマイズし、プロジェクトがさまざまな環境で対応するリソース ファイルを正しく読み込めるようにします。この記事ではこれらの解決策を紹介し、皆様のお役に立てれば幸いです。

以上がvue cli 3 デプロイメントリソースパスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。