众所周知，vue是单页应用。下面这篇文章主要介绍vue单页改造多页应用的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。

前言

单页和多页的区别我就不细说了。我们的业务适合多页面，很多小应用整体嵌入iframe。

如果项目太大，会有非常不好的体验问题。如果拆分多个项目，会有额外的费用，比如服务器资源部署。

基于此改造的目标

独立的业务逻辑，单个页面，单个命令包，单个包。

首先我们准备一个基础项目。

目录结构如下

src目录是我们平时开发的目录，dist是打包的目录。整体结构如图所示。

1将当前项目转换成多页目录。

Pages是为我们开发的目录文件。转换过程是将原来src下的所有目录结构复制到home，索引的每一页都有单独的副本。为了将多页面的优势兑现出来，这里我们选择两个ui框架，以便最终比较装箱体积。

npm i元素-ui -S

npm i ant-design-vue -S

分别在首页和索引中介绍。

首页也差不多，然后我们改vue.config.js

模块.导出={

公共路径：“”。/,

productionSourceMap: false，

Pages: {//vue cli3自带多页配置。

索引：{

条目：` src/pages/index/main.js `，

模板：` public/index.html `，

文件名：` index.html

},

首页：{

条目：` src/pages/home/main.js `，

模板：` public/index.html `，

文件名：` home.html

}

},

devServer: {

端口：8080

},

lintOnSave: false

}

现在让我们打包，看看生成的目录结构。

文件大小Gzipped

dist js chunk-vendors . 239 e820f . js 2544.36 KiB 703.20 KiB

dist js index . 1716 ccad . js 11.33 KiB 4.13 KiB

dist js home . e 4410 a 07 . js 7.08 KiB 2.57 KiB

dist js about . ca 80 b 2 fc . js 0.76 KiB 0.29 KiB

dist CSS chunk-vendors . 68b 49 EDF . CSS 666.01 KiB 89.04 KiB

dist CSS index . 5 DFA 7415 . CSS 0.45 KiB 0.28 KiB

dist CSS home . d 995708 f . CSS 0.44 KiB 0.27 KiB

省略图像和其他类型的资产。

构建时间：2022-05-01T12:26:06.551Z -哈希：693bf5bdcf72896b -时间：16240毫秒

完成构建完成。dist目录已准备好进行部署。

信息查看https://cli.vuejs.org/guide/deployment.html的部署说明

可以看到包装好的混在一起。我们的下一步是将它们分开，可配置的命令被单独打包。这个想法是循环页面下的文件夹。我们在pages下的目录中找出所有带有main.js的文件夹名。当然，我们也可以手动编写。每次添加一个页面，我们都单独维护这个数组。

Const pages=[home ， index] //添加页面时手动维护此数组。

当然我们也有办法帮我们维护这个数组，可以在我们更新的时候省去一些麻烦。

//获取页面下的文件夹

const path=require(path )

const glob=require(glob )

//找到pages所在的文件夹hello-worldsrcpages

const PATH _ ENTRY=PATH . resolve(_ _ dirname，./src/pages )

//匹配页面路径下的main.js文件

//[

//D:/测试项目/hello-world/src/pages/home/main . js ，

// D:/test project/hello-world/src/pages/index/main . js

//]

const ENTRY file paths=glob . sync(PATH _ ENTRY /* */main . js )

const buildEntries=[]

entry file paths . foreach((file path)={

//找到对应的文件名，索引home

const filename=filepath.match(/([^/])/main 。js$/)[1]

buildEntries.push(文件名)

})

模块.导出={

构建条目

}

BuildEntries不仅仅是我们得到的数组。

现在我们先继续改造vue.config.js，我们改变package.json中命令参数的形式，根据我们传递的参数分别封装相应的页面。

脚本:{

serve: vue-cli-service serve ，

build : vue-CLI-服务版本，

build:index : vue-CLI-service build index-no-clean ，//注意免清洗不能清除文件，不然可能将文件夹下打包的其他页，面，张，版清理掉，如果是每次部署一个页面，这就无所谓了

“构建：主页”:“vue-CLI-服务构建主页-免清洗”，

构建：生产: vue-CLI-服务版本，

_build :节点build/build.js ，

lint : vue-CLI-服务皮棉

}

我们如何能拿到传入的指数或者家参数呢结果是process.argv这个参数中可以取到，具体可以自行搜索下process.argv为一个数组，第一项为可执行文件的目录第二项为当前执行的Java脚本语言文件路径剩余的是传递的参数，就如我们传递的指数是在process.argv[3]中现将vue。配置。射流研究…改造如下

//编译配置的多页面

常量模块={}

const是生产=过程。环境。node _ ENV===生产

const { buildEntries }=require(./config/get pages’)

//初始化页面参数

函数initPageParams(page) {

模块[ page ]={

条目：` src/pages/$ { page }/main。js `，//页面的入口

模板：` public/index.html `，//模板来源

文件名：` ${page}。html `，//在dist/index.html的输出

}

}

const page=process。argv[3]| | 索引

//如果是开发环境，运行阶段

如果(!isProduction) {

对于(构建条目的常数页){

initPageParams(第页)

}

}否则{

//只有在生产打包的时候，单独打包，拆成不用的文件夹

initPageParams(第页)

}

模块。导出={

公共路径：""。/,

输出目录：距离，

资产目录：是生产吗？页面："静态",

productionSourceMap: false，

页面：模块，

devServer: {

端口：8080

},

lintOnSave: false

}

这时候我们npm运行构建：索引尝试查看打包结果，可以看到，可以将指数对应的文件全部放在指数文件目录下，如果我们需要打包家，直接npm运行构建：主页

文件大小Gzipped

dist index js chunk-供应商。c 60 bfe2f。1837.82 KiB 527.87 KiB

s

距离索引 js 索引。e2aa 144d。js 11.28 KiB 4.12 KiB

dist index js about2a 86 a3 CB。js 0.43 KiB 0.28 KiB

dist index CSS chunk-供应商。ef 376986。456.88 KiB 55.99 KiB

钢性铸铁

距离索引 CSS 索引。5 DFA 7415。CSS 0.45 KiB 0.28 KiB

省略图像和其他类型的资产。

构建时间：2022-05-03T03:46:54.824Z哈希：e2d53105a245deab -时间：12711毫秒

完成构建完成105 .区。目录已准备好进行部署。

信息查看https://cli.vuejs.org/guide/deployment.html的部署说明

现在我们已经实现了，单独页，面，张，版单独打包，但我们如果想，一个命令打包所有的页，面，张，版呢。这个时候我们就需要结节一个方法来帮助我们实现了我们在单独建一个射流研究…文件代码如下

const fs=require( fs )；

const exec sync=require( child _ process ).execSync

const { buildEntries }=require(./config/get pages )；

//移除目录

函数deleteDist(path) {

let files=[]；

//判断目录是否存在

if (fs.existsSync(path)) {

files=fs.readdirSync(路径);//读取目录

//@ ts-忽略

files.forEach((file)={

const cur path=path"/"文件；//拼接目录写文件完整路径

if (fs.statSync(curPath)).isDirectory()) { //读取文件路径状态判断是否为文件夹如果为文件夹，递归

delete dist(curPath)；

}否则{

fs。unlink sync(curPath)；//删除文件

}

});

fs.rmdirSync(路径);

}

}

尝试{

常数开始时间=日期。now()；

过程。环境。node _ ENV= production//切换环境为生产

//执行打包前删除距离目录

deleteDist(./dist )；

对于(构建条目的常数页){

//可以执行我们的命令，第一个参数是命令，第二个参数的意思是输出子进程中的日志

exec sync(` vue-CLI-service build $ { page }-no-clean ，{ stdio: inherit })；

}

//重置

过程。环境。node _ ENV=未定义；

常数时间=日期。now()-开始时间；

控制台。日志( 033[42；30米全部完成33[0m构建在` { time/1000 }秒内编译成功];

} catch (e) {

console . log( 033[41；30m失败 033[0m e]；

}

也就是循环执行打包命令的思路。关键在于为我们执行打包命令的execSync方法。现在我们执行它，npm run _build。

至此，我们的多页打包基本完成，后续可以做一些cdn处理或者组块的解包优化。小伙伴们自己学习。

总结

关于vue单页转换和多页的应用，本文到此结束。更多相关的vue单页转化和多页内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！