WebPack を使用して vue マルチページを構成する方法

今回は、WebPack を使用して Vue マルチページを構成する方法を説明します。WebPack を使用して Vue マルチページを構成する場合の注意事項については、次のとおりです。

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

§── 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(

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

webpack.prod.conf.jsを変更します Open ~ buildwebpack.prod.conf.js を作成し、プラグインの下で HtmlWebpackPlugin を見つけ、その後に対応する複数のページを追加し、各ページのチャンク設定を追加します:

new HtmlWebpackPlugin({
 filename: config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.admin,
 template: 'admin.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'admin']
}),

この記事のケースを読んだ後は、この方法をマスターしたと思います。よりエキサイティングなコンテンツについては、 、php中国語ウェブサイトの他の関連記事にもご注目ください。

推奨読書:

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