Vue Scaffolding public に何を置くか

通常、一部の静的リソース (画像) は public フォルダーに配置されますが、webpack がパッケージ化する場合、それらはそのまま dist フォルダーにパッケージ化されます。パブリック ディレクトリ内のファイルは Webpack によって処理されず、最終的なパッケージング ディレクトリ (デフォルトは dist/static) に直接コピーされます。これらのファイルは、「vue.config.js」に応じて絶対パスを使用して参照する必要があります。 " publicPath の設定では、デフォルトは "/" です。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1. Vue スキャフォールディングをインストールします

1. 最初のステップ (初回のみ実行): グローバル インストール @vue/cli

npm i @vue/cli -g

2、プロジェクトを作成するディレクトリに切り替えて、プロジェクト

vue create XXX

3 を作成します。プロジェクトを開始します

npm run serve

注:

1. npm Taobaoミラーアドレス

npm config set registry https://registry.npm.taobao.org

2. Vue スキャフォールディングはすべての Webpack 関連の設定を非表示にします。表示して実行したい場合は

vue inspect > output.js

2. vue-cli スキャフォールディング初期化プロジェクトの各フォルダーの目的

#node_modules フォルダー #:プロジェクトの依存関係フォルダー # #public フォルダー:

通常、いくつかの静的リソース (画像) を配置します。 public フォルダーに配置された静的リソースは、webpack がパッケージ化するときに、そのままの状態で dist フォルダーにパッケージ化されることに注意してください。 パブリック フォルダーに配置された静的リソースは、webpack を経由せずに単純にコピーされます。絶対パスを介して参照する必要があります。

リソースはモジュールの依存関係グラフの一部としてインポートすることをお勧めします。これにより、リソースは webpack によって処理され、次の利点が得られます:

スクリプトとスタイルシートは圧縮され、パックされます。追加のネットワーク要求を避けるために一緒に使用します。

ファイルが失われた場合、ユーザー側で 404 エラーが生成されるのではなく、コンパイル中にエラーが直接報告されます。

• 最終的に生成されるファイル名にはコンテンツ ハッシュが含まれるため、ブラウザが古いバージョンをキャッシュすることを心配する必要はありません。
• パブリック ディレクトリは回避策を提供します。絶対パスで参照する場合は、アプリケーションがデプロイされる場所に注意してください。アプリケーションがドメインのルートにデプロイされていない場合は、URL の
• publicPath
プレフィックスを設定する必要があります: public/index.html または HTML 経由で

-webpack- プラグインがテンプレートとして使用される HTML ファイルでは、 <%= BASE_URL %> によってリンク プレフィックスを設定する必要があります:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

テンプレートを使用するには、まずリンク プレフィックスをベース URL に設定する必要があります。 コンポーネントはベース URL を渡します:

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

次に:

• <img :src="`${publicPath}my-image.png`">

パブリック フォルダーを使用する場合

ビルド出力名にファイルを指定する必要があります。

何千もの画像があり、それらのパスを動的に参照する必要があります。

• 一部のライブラリは webpack と互換性がない可能性があります。この場合、別のライブラリを使用することに加えて、
• vue-cli3.0 には静的リソースを配置するための 2 つのディレクトリがあります: public と資産。

public は変更されないファイルを配置します (vue-cli2.x の static に相当)

public/ ディレクトリ内のファイルは Webpack によって処理されません。処理されます。最終的なパッケージ化ディレクトリ (デフォルトは dist/static) に直接コピーされます。これらのファイルは絶対パスを使用して参照する必要があります。これは、vue.config.js の publicPath 設定によって異なります。デフォルトは / です。

assets は、変更される可能性のあるファイルを配置します。

アセット ディレクトリ内のファイルは、webpack によって処理され、モジュールの依存関係に解析されます。相対パス形式のみがサポートされます。

簡単に言うと、publicは他人のjsファイル(つまり変更されない)を置き、assetsは自分が書いたjsファイル(変更が必要なファイル)を置きます

src フォルダー

## アセット フォルダー: 通常、静的リソース (複数のコンポーネントによって共有される静的リソース) を保存するために使用されます。 webpack が静的リソースをフォルダーにパッケージ化する場合、webpack は静的リソースをモジュールとして扱い、それらを JS ファイルにパッケージ化します。 コンポーネント フォルダー: 通常、非ルーティング コンポーネント (グローバル コンポーネント) が配置されます。

App.vue: 唯一のルート コンポーネント (すべてのコンポーネントの概要)

main.js:エントリ ファイル は、プログラム全体で最初に実行されるファイルでもあります。

.gitignore: git バージョン管理によって無視される設定 (通常は触れられません)

babel.config.js: babel の設定ファイル(翻訳公式に相当。たとえば、ES6 関連の文法を ES5 に翻訳します。ES5 は互換性が高く、通常は触れられません)

package.json: アプリケーション パッケージ構成ファイル (プロジェクト ID カードに似ており、プロジェクト名、プロジェクトの依存関係、プロジェクトの実行中およびその他の情報を記録します)

package-lock.json: パッケージのバージョン管理ファイル (キャッシュ可能性)ファイル)

README.md: アプリケーション記述ファイル(説明ファイル)

vue.config.js: スキャフォールディングをカスタマイズ可能 設定方法はVue CLIを参照

その他のフォルダー:

• pages フォルダー: ルーティング関連コンポーネントを格納します (ページは次のものに置き換えることもできます) views)

• #router フォルダー: ルーティング設定ファイル

#store フォルダー: vuex 関連ファイル

• モック フォルダー: モック シミュレーション データを保存します
3. スキャフォールディング作業環境

vue-cli スキャフォールディング環境: node webpack# に基づく##vue プロジェクトの作成をサポートするには

デフォルトのエントリ ファイル main.js: すべてのコードは main.js と直接または間接的な導入関係を持つ必要がありますパッケージ化プロセス: 現時点ではパッケージ化を実行します, webpackは入口の導入関係に基づいてコードマップを構築し、該当するコードをローダー/プラグインで翻訳して.jsファイルに出力し、index.htmlに挿入して

##を実行します。 #① main.js → パッケージ化して実行入口

② Vue.component("コンポーネント名", コンポーネントオブジェクト) → Vueのグローバルコンポーネントを登録

実行手順：まずグローバルコンポーネントを登録main.js ファイルを介して、このグローバル コンポーネントはコンポーネント

[関連する推奨事項:

vuejs ビデオ チュートリアル

、

Web フロントエンド開発

]# 内で使用されます。 ##

以上がVue Scaffolding public に何を置くかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。