今回は、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.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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
