本文介绍如何在Vue CLI脚手架中通过修改Webpack配置实现多页面应用开发。主要步骤包括在utils.js中编写获取入口文件路径的方法，修改webpack.base.conf.js以支持多入口，并在webpack.dev.conf.js和webpack.prod.conf.js中通过循环生成多个HtmlWebpackPlugin实例，从而在开发和生产环境中同时构建多个HTML页面。
本文主要探讨在使用Webpack编译多页面Vue项目时遇到的配置问题，并提供相应的解决方案供参考。
Vue项目构建标准流程
通常，构建一个Vue项目的标准流程如下：
第一步，安装Node.js运行环境。
第二步，安装Vue CLI命令行工具。
cnpm install vue-cli -g 第三步，利用Vue CLI初始化并构建Vue项目骨架。
vue init webpack-simple vue-cli-multipage-demo 第四步，安装项目所需的各类依赖包。
cnpm install 第五步，在开发模式下启动并运行该项目。
npm run dev 完成上述步骤后，一个基础的Vue项目开发环境即搭建完毕，后续工作便进入具体的代码编写阶段。
多页面应用需求与Webpack配置调整
近期在进行前端代码重构时，我发现标准的Vue脚手架项目无法满足特定需求。这一需求看似与Vue作为单页面应用（SPA）框架的初衷相悖。具体来说，在网页开发中，有时点击链接会在浏览器中打开一个新的标签页来展示内容，这构成了多页面的场景。此时，新打开的页面已脱离原主页面，而SPA通常通过路由机制在单一页面内切换视图，无法直接处理这种独立的新窗口页面需求。
默认情况下，由Vue CLI生成的Webpack配置文件仅支持单页面应用开发，即只有一个入口文件，且最终只生成一个HTML页面。若要实现多页面构建，只需对Webpack配置进行适当调整即可轻松实现。
具体配置步骤详解
首先，需要在build目录下的utils.js文件中添加一个方法，用于获取指定文件夹内所有文件的路径，并将解析结果以对象形式返回。
var glob = require("glob");//分析文件夹中文件路径的第三方模块
exports.getEntry = function(globPath) {
var entries = {},
basename, tmp, pathname;
if (typeof (globPath) != "object") {
globPath = [globPath]
}
globPath.forEach((itemPath) => {
glob.sync(itemPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
if (entry.split('/').length > 4) {
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
} else {
entries[basename] = entry;
}
});
});
return entries;
}
接下来，修改webpack.base.conf.js文件，调整入口文件配置。原配置为单文件入口，现需将其改为多文件入口模式。
参考webpack.dev.conf.js的相关配置。
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var glob = require('glob');
var entries = utils.getEntry(['./src/module/**/*.js']); // 获得多页面的入口js文件
var env = process.env.NODE_ENV
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
entry: entries,//这是通过前面新增的方法获取的文件路径对象
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
}
...
}
随后，需要修改webpack.dev.conf.js文件，主要涉及首页配置的变更，此处需配置多个页面入口。
参考webpack.dev.conf.js的具体实现。
var path = require('path');
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
...
});
//新增
var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
inject: true, // js插入位置
chunksSortMode: 'dependency'
};
if (pathname in module.exports.entry) {
conf.chunks = ['manifest', 'vendor', pathname];
conf.hash = true;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
此处的关键在于修改HtmlWebpackPlugin的配置对象。原配置仅生成单个HTML文件，现通过遍历pages对象，循环生成多个HTML配置对象。
完成上述配置后，执行npm run dev命令时，Webpack即可同时构建多个页面，并将webpack.base.conf.js中配置的JS文件插入到对应的HTML页面中。
运行项目npm run dev后，即可访问不同的页面。需要注意的是，为了有效管理多个页面，建议在src目录下建立专门的目录来存放不同页面的代码，这样项目结构更加清晰，便于后期维护。
示例与生产环境配置
这是一个示例Demo的地址，有兴趣的读者可以拉取代码查看：vue-cli-multi-page。
项目运行后，访问http://localhost:8080/module/index.html，点击按钮即可打开新页面。
上述配置仅针对开发环境。生产环境的配置文件webpack.prod.conf.js同样需要修改，以确保在生产打包时，dist目录中能同时生成多个HTML文件。
参考webpack.prod.conf.js的配置细节。
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用于清除目录文件
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
...
}
//这里是修改的部分，和webpack.dev.conf.js的修改是一样的
module.exports = webpackConfig
var pages =utils.getEntry(['./src/module/**/*.html']);
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',//生成 html 文件的文件名
template: pages[pathname], // 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader，
inject: true, // 注入选项。有四个选项值 true, body, head, false.true:默认值，script标签位于html文件的 body 底部,body:同 true,head:script 标签位于 head 标签内,false:不插入生成的 js 文件，只是单纯的生成一个 html 文件
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
};
if (pathname in module.exports.entry) {
conf.chunks = ['manifest', 'vendor', pathname];
conf.hash = true;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
以上便是利用Vue CLI脚手架解决Vue多页面开发问题的完整方案，希望对各位的学习有所帮助，也欢迎大家继续支持本站。