WebPack を使用して Vue マルチページを構成する手順の詳細な説明

今回は、WebPack を使用して Vue マルチページを構成する手順について詳しく説明します。WebPack を使用して Vue マルチページを構成する場合の 注意事項 は何ですか? ここでは実際のケースを見てみましょう。

WebPack は私を何千回も苦しめました、私は彼女を初恋のように感じました。プロジェクトのフロントエンド ページはほぼ作成されており、webpack には構成がほとんどないため、機能していると考えられます。次に、バックエンド管理インターフェイスを作成し、存在しない別のプロジェクトを開始する必要があります。それで、インターネットでたくさんの記事を検索しましたが、その多くはプロジェクトの構造を変更していました。なぜ何度も変更する必要があるのですか。私のようなフロントエンド初心者にとっては、webpackの設定を変更するとフロントエンド部分が動作しなくなります。 。 。

それで、私はこのメモを持っています:

まずプロジェクトの構造を見てください:

§── build

§── config
til── src
│ ├── api
│ っていつ──アセット
│ §── コンポーネント
│ §── ページ
│ §── ルータ
│ §── utils
│ §── vuex
│ っていつ── App.vue
│ §── main.js
│ っています─ ─ admin.js
│ └─ Admin.vue
§─
static│ └─ 画像
§─ README.md
§─ admin.html
§─ Index.html
─ ─ package.json
└──yarn.lock

この構造は、

フォルダーと src フォルダーの下にある Admin.vue と admin.js に加えて、いくつかの api、pages、vuex およびこれは、vue-cli によって初期化される最も一般的なプロジェクト構造です。 admin.html

私が望むのは、

バックエンド管理インターフェースadmin.htmlへの入り口を追加することです。他の共有可能なものは共有されます。

webpackの設定ファイルを変更します

。

webpack.base.conf.js を変更します ~buildwebpack.base.conf.js を開き、エントリを見つけて複数のエントリを追加します:

entry: {
 app: './src/main.js',
 admin: './src/admin.js' //新增
},

この方法でコンパイルを実行すると、各エントリがチャンクに対応します。 。

開発構成の変更を実行します~buildwebpack.dev.conf.jsを開き、プラグインの下でHtmlWebpackPluginを見つけ、その後ろに対応する複数のページを追加し、次のように各ページのチャンク構成を追加します:

new HtmlWebpackPlugin({
 filename: 'index.html', //生成的html
 template: 'index.html', //来源html
 inject: true, 
 chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源
}),
new HtmlWebpackPlugin({
 filename: 'admin.html',
 template: 'admin.html',
 inject: true,
 chunks: ['admin']
}),

実行ビルド構成の変更

config/index.jsを変更します ~configindex.jsを開き、buildの下のインデックスを見つけます: path.resolve(

dirname

, '../ dist/index. html') の後に複数のページを追加します:admin: path.resolve(dirname, '../dist/admin.html'),

webpack.prod.conf.jsを変更します Open ~ buildwebpack.prod.conf.js を開き、プラグインの下で HtmlWebpackPlugin を見つけ、その後ろに対応する複数のページを追加し、各ページのチャンク構成を追加します。どのようなプロジェクト構造を変更しても、プロセスが複雑になればなるほど、間違いを犯す可能性が高くなります。上記の Webpack 構成はシンプルで理解しやすいです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

webpackを使用してReact開発環境を構築する手順の詳細な説明

Nodejsがモジュールをグローバルにインストールした後、コマンド処理メソッドが見つかりません

以上がWebPack を使用して Vue マルチページを構成する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。