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 を見つけ、その後に対応する複数のページを追加し、各ページのチャンク設定を追加します:

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中国語ウェブサイトの他の関連記事にもご注目ください。

推奨読書:

vux アップローダーの画像アップロード コンポーネントの使用方法

vue :src ファイル パス エラーの対処方法

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