ホームページ >ウェブフロントエンド >jsチュートリアル >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.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 サイトの他の関連記事を参照してください。