静的ファイルを使用しない vue スキャフォールディング作成プロジェクトの何が問題なのでしょうか?

フロントエンド テクノロジーの継続的な開発に伴い、日々の開発にますます多くのフロントエンド フレームワークが導入されています。これらのフレームワークの中でも、Vue.js は高速で軽量なフロントエンド フレームワークとして開発者からの支持が高まっています。 Vue.js の開発中は、通常、公式のスキャフォールディングである Vue CLI を使用してプロジェクトを作成します。ただし、場合によっては、Vue CLI を使用してプロジェクトを作成すると、静的フォルダーが生成されないことがわかり、初心者の開発者は混乱する可能性があります。この記事では、この一般的に発生する問題を解決する方法について説明します。

まず、なぜこれが起こるのかを理解しましょう。 Vue CLI を通じて新しいプロジェクトを作成すると、Vue CLI はいくつかのデフォルト設定と構造をプロジェクトのベース ファイルとして初期化します。これらのファイルは、プロジェクトのルート ディレクトリにある src というフォルダーに含まれています。デフォルトでは、Vue CLI は静的ファイルを含むフォルダーを生成しません。そのため、CSS や JavaScript ファイルなどの静的フォルダー リソースにアクセスしようとすると、通常は 404 エラー ページが表示されます。

それでは、Vue CLI で作成したプロジェクトに静的フォルダーを追加するにはどうすればよいでしょうか?以下に 2 つの異なる方法を紹介します。

方法 1: 静的フォルダーを手動で作成する

まず、プロジェクトのルート ディレクトリに static という名前のフォルダーを手動で作成する必要があります。このフォルダーは、静的リソース ファイルを保存するために使用されます。静的フォルダーの下にいくつかのサブフォルダーを作成して、さまざまな種類の静的リソースを保存できます。たとえば、CSS フォルダーを作成してそこにすべての CSS ファイルを保存したり、画像フォルダーを作成してすべての画像リソースを保存したりすることもできます。

静的フォルダーを作成したことを Vue CLI に知らせるには、ルート ディレクトリで vue.config.js という名前のファイルを見つけて開く必要があります。ファイルがない場合は、手動で作成する必要があります。次のコードを vue.config.js ファイルに追加します。

module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].from = 'static'
        return args
      })
  }
}

このコードは、プロジェクトのビルド時に静的フォルダーのすべての内容をプロジェクトのルート ディレクトリにコピーするように Vue CLI に指示します。これで、静的リソース ファイルを静的フォルダーに配置し、Vue.js プロジェクトで通常どおり使用できるようになりました。

方法 2: パブリック フォルダーを使用する

Vue CLI には、静的ファイルをプロジェクトに追加する別の方法もあります。この方法は、静的ファイルをパブリック フォルダーに保存することです。パブリック フォルダーは src フォルダーとは異なるため、コンパイルされて最終プロジェクトにパッケージ化されません。代わりに、これらは最終的にビルドされたプロジェクトのルート ディレクトリにコピーされます。

この方法を使用するには、静的リソース ファイルをパブリック フォルダーに配置し、次のように HTML ファイルで使用するだけです:

<link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">

注意してください。 Vue CLI 3 では、静的ファイルをパブリック フォルダーに保存する場合、vue.config.js ファイルで構成を行う必要はありません。

概要

Vue.js の開発プロセスでは、通常、公式のスキャフォールディングである Vue CLI を使用してプロジェクトを作成します。 Vue CLI を使用してプロジェクトを作成した後、静的フォルダーが生成されていないことが判明した場合は、静的フォルダーを手動で作成するか、パブリック フォルダーを使用して静的ファイルを追加できます。 Vue.js を学習している初心者の開発者であれば、この記事が役に立つと思います。

以上が静的ファイルを使用しない vue スキャフォールディング作成プロジェクトの何が問題なのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。