前言

首先，我们可以把多页应用理解为多个单页组成的应用，什么是多单页？其实你可以把单个页面想象成一个html文件，那么多个单个页面就是多个html文件，多页面应用就是多个html组成的应用，如下图所示

由于多页应用程序有多个html，它也应该有多个独立的条目文件、组件、路由、vuex等等。没错，简单来说，多页应用程序的每个单页都可以在单页应用程序的src目录下有文件和函数。让我们看看一个基本的多页应用程序的目录结构

节点_模块#项目依赖包目录构建#项目webpack功能目录配置#项目配置项文件夹 src #前端资源目录 图片#图片目录 组件#公共组件页面目录 页面1 #页面1目录 组件#页面1组件目录 页面1页面目录 页面1 html模板 页面1.vue #页面1vue配置文件 页面1.js #页面1入口文件 页面2 #页面2目录 索引#索引目录 公共方法目录 商店#状态管理商店目录。 gitignore # gitignore文件。env #全局环境配置文件 .env.dev #开发环境配置文件. postcsrc . js # postcss配置文件 babel.config.js # babel配置文件 package.json #包管理文件 vue.config.js # CLI配置文件纱. lock #纱依赖信息文件

第二，多个入口

在单页应用中，我们只有一个入口文件，CLI的默认配置是main.js，但是在多页应用中，我们的入口文件包括page1.js、page2.js、index.js等。数量取决于pages文件夹下的目录数量。此时，为了扩展项目，我们需要自动计算条目文件的数量，并分析webpack中条目属性的路径配置，例如：

该模块. exports={ 0.entry : { page 13360 '/XXX/pages/page 1/page 1 . js '，page 2: '/XXX/pages/page 2/page 2 . js '，index 3360 '/XXX/pages/index/index . js '我们可以在根目录中创建新的构建文件夹，存储共享的webpack功能文件，如utils.js，并添加多条目读取和解析方法

/* utils . js */const path=require(' path ')；//glob是安装webpack时依赖的第三方模块。本模块允许您使用符号，如*。//例如，lib/*。js是const glob=require('glob ')文件，用于获取lib文件夹中的所有js后缀。//获取对应的页面路径。由于之前的配置，它是pages文件夹const page _ path=path。resolve (_ _ dirname '，/src/pages ')；/* *多条目配置*通过glob模块读取pages文件夹下所有对应文件夹中的js *后缀文件。如果文件存在*，它将被视为条目*/导出。getentries=()={ letentryfiles=glob . sync(page _ path '/*/*)。js’)//同时读取所有的入口文件。let map={} //遍历所有条目文件entryfiles . foreach(filepath={//获取文件名let filename=file path . substring(file path . last indexoff(' /')1，file path。lastindexoff(' . '))//存储映射[文件名]=文件路径})返回映射}

在读取和存储之后，我们得到一个条目文件的对象集，我们可以将其设置为webpack的条目属性。这里需要修改vue.config.js的配置，间接修改webpack的值。

/* vue . config . js */const utils=require('。/build/utils ')模块，exports={ 0.配置web pack : config={ config . entry=utils . getentries()}，}这样我们的多条目设置就完成了，但这不是CLI所做的。

第三，多模板

与多个门户相比，多个模板的配置相似。这里提到的模板是每个页面下的html模板文件，模板文件主要用于webpack中html-webpack-plugin插件的配置。它将根据模板文件生成一个编译好的HTML文件，并自动添加携带哈希的脚本和样式。基本配置如下

/* webpack配置文件*/const html webpackplugin=require(' html-web pack-plugin ')//安装并引用插件模块. exports={ 0.plugins :[新的html webpackplugin({ title : ' my page '，//在html中生成title filename: 'demo.html '。//生成html文件名template : ' XXX/XXX/demo . html '，//模板路径chunk 3360[' manifest '，' vendor '，' demo']，//要包含的模块inject3360true，//是否注入资源})].}以上是单模板配置，所以如果是多模板，只需继续向plugins数组中添加HtmlWebpackPlugin即可。但是，为了像多个门户一样灵活地获取和配置pages目录中的所有模板文件，我们可以在utils.js中添加多模板读取和解析方法

/* utils.js *///多页输出配置//与上面的多页入口配置相同。读取页面文件夹下对应的html后缀文件。然后把它放入数组：exports.html插件=configs={ let entry html=glob . sync(page _ path '/*/*)。html ')let arr=[]entryhtml . foreach(filePath={ let filename=file path . substring(file path . last indexof(/')1，file path。lastindexoff(' . '))让conf={template3360filepath，//模板路径filename3360filename '。html '，//生成html文件名chunks: ['清单'，供应商'，文件名]，inject: true。} //如果有自定义配置，合并if (configs) {conf=merge (conf，Configs)} //配置if (process。env . node _ env==' production '){ conf=merge(conf，{ minify : { remove comments 3360 true，//删除html中的注释代码collapse whitespace:true，//删除html中的空白字符//removeattributequotes 3360 rue//删除html元素中属性的引号}，chunkssortmode : ' manual '///按手动的顺序引入)} arr。push(new html webpackplugin(conf))})return arr }

在上面，我们仍然使用glob读取所有模板文件，然后遍历它们并设置每个模板的配置。同时，我们合并了一些定制配置和生产环境配置，其中我将在下一节介绍定制配置的功能。在这里，我们将介绍minify配置在生产环境中的作用：使用html-minifier选项作为对象来减少输出。Html-minifier是一个用于减小Html文件大小的工具。它有很多配置项功能，包括删除注释、空格、引号等。当我们写完多模板方法后，也可以在vue.config.js中进行配置，与多入口不同，我们不能直接替换configureWebpack中插件的值。因为它还包含其他插件/* vue . config . js */const utils=require('。/build/utils ')模块。导出={ 0.configure web pack 3360 config={ config . entry=utils . getentries()//直接覆盖条目配置//使用return通过webpack-merge合并对象。插件不会清空返回{插件： [.utils.htmlplugin ()]}}，}，这样就完成了我们多页面应用的多入口多模板的配置。此时，在我们运行命令yarn build之后，您会发现在dist目录中生成了三个html文件，它们是index.html、page1.html和page2.html。

第四，使用页面配置

实际上，在vue.config.js中，我们还有一个未使用的配置，那就是pages。Pages对象允许我们为应用程序配置多个门户和模板，这为我们的多页面应用程序提供了一个开放的配置门户。官方示例代码如下

/* vue . config . js */module . exports={ pages 3360 { index 3360 }//entry entry : ' src/index/main . js '，//模板源template3360' public/index.html '，//在dist/index.html的输出中，filename: 'index.html '，//使用title选项时，//模板中的title标记需要为title %=html webpackplugin . options . title %//默认情况下，此页面中包含的块将包含//提取的通用块和供应商块。chunk s 3360[' chunk-venders '，' chunk-common '，' index']}，//当使用只有条目的字符串格式时，//模板将被推导为' public/subpage.html` //如果找不到，它将恢复为' public/index.html`。//输出文件名将推导为‘子页. html’。子页： ' src/子页/main.js'}}我们很容易发现pages对象中的键是条目的别名，而它的value对象实际上是条目条目和模板属性的组合，这样就可以将上面介绍的获取多个条目和模板的方法组合成一个函数来处理多个页面。组合设定值方法如下

//pages多条目配置导出. set pages=configs={ let entry files=glob . sync(page _ path '/*/*)。js ')let map={ } entryfiles . foreach(file path={ let filename=file path . substring(file path . last indexof(' /')1，filepath.lastindexoff(')的条目))lettmp=filepath.substring (0，file path . last indexoff(' /'))letconf={//page entry : file path，//模板源template: tmp '。html '，//输出文件名：filename '。' html '在dist/index.html中，//页面模板需要添加相应的js脚本。如果不添加这一行，所有js脚本chunk s 3360[' manifest '，' vendor '，filename]，inject: true，}将被引入到每个页面中。if (configs) { conf=merge(conf，configs)} if(process . ENV . node _ ENV==' production '){ conf=merge(conf，{ minify : { removecomments : true，//删除html中的注释代码collapse whitespace:true，//删除html中的空白字符//removeattributequotes 3360 true//删除html元素中属性的引号}，chunkssortmode 3360 ' manual '///按手动的顺序引入)}

/* vue . config . js */const utils=require('。/build/utils’)模块。导出={ 0.第：页。setpages()，}从而完成基于页面配置的多页面应用的改进。当运行packaging命令查看输出结果时，会发现与之前的方法相比没有什么变化，这说明两种方法都适合多页构建，但这里建议使用更方便的页面配置。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。