Vue Scaffolding public に何を置くか-フロントエンドQ&A-php.cn

Vue Scaffolding public に何を置くか

青灯夜游

リリース： 2022-12-22 19:55:20

オリジナル

3681 人が閲覧しました

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

Vue Scaffolding public に何を置くか

#このチュートリアルの動作環境: 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

-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 フォルダー: ルーティング設定ファイル
モックフォルダー: モックシミュレーションデータを保存します

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 サイトの他の関連記事を参照してください。