Vue CLI 项目配置多页面应用：后台管理入口集成方案

Vue CLI 多页面配置背景与目标

WebPack 的配置过程往往繁琐，但为了项目顺利运行仍需精心处理。当前前台页面开发已基本完成，Webpack 几乎保持零配置状态即可正常运行。现在需要开发后台管理界面，如果另起一个独立项目显然不合理。查阅大量网络文章后发现，多数方案建议修改项目原有结构，这令人困扰。Vue CLI 生成的标准结构已经足够清晰，强行修改反而容易出错，尤其是对于前端初学者，调整 Webpack 配置可能导致前台部分无法启动。

基于上述痛点，整理出以下配置笔记。

首先查看当前项目的目录结构：

├── build ├── config ├── src │ ├── api │ ├── assets │ ├── components │ ├── pages │ ├── router │ ├── utils │ ├── vuex │ ├── App.vue │ ├── main.js │ ├── admin.js │ └── Admin.vue ├── static │ └── images ├── README.md ├── admin.html ├── index.html ├── package.json └── yarn.lock

熟悉 Vue CLI 初始化的开发者会对这种结构感到亲切。除了 admin.html 以及 src 目录下的 Admin.vue 和 admin.js 文件外，还有 api、pages、vuex 等常规文件夹，这属于标准的 Vue CLI 初始化项目结构。

目标是在不改变现有结构的前提下，新增后台管理界面的入口 admin.html，并复用其他共用资源。以下是具体操作步骤：

Webpack 核心配置修改

第一步：修改 Webpack 的核心配置文件。

具体操作 webpack.base.conf.js。

打开 ~\build\webpack.base.conf.js 文件，定位到 entry 字段，添加多入口配置：

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

这样配置后，在运行编译时，每个入口都会对应生成一个独立的 chunk。

开发环境 HtmlWebpackPlugin 配置

第二步：修改开发环境（run dev）的配置。

打开 ~\build\webpack.dev.conf.js 文件，在 plugins 数组中找到 HtmlWebpackPlugin，在其后添加针对多页面的配置，并为每个页面指定对应的 Chunk，配置如下：

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']
}),

生产环境配置与输出路径调整

第三步：修改生产环境（run build）的配置。

需要调整 config/index.js 文件。

打开 ~\config\index.js 文件，找到 build 节点下的 index 字段：path.resolve(__dirname, '../dist/index.html')，在其后添加多页输出配置：

admin: path.resolve(__dirname, '../dist/admin.html'),

第四步：修改 webpack.prod.conf.js 文件。

打开 ~\build\webpack.prod.conf.js 文件，在 plugins 数组中找到 HtmlWebpackPlugin，在其后添加对应的多页配置，并为每个页面指定 Chunk，配置如下：

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']
}),

配置完成。

无需对项目结构进行复杂调整，过程越简单越不易出错。上述 Webpack 配置逻辑清晰，易于理解。