手把手带你把vue+webpack从单页改成多页（适合入门），支持多级目录单页不再那么顺畅了。那么我的vue+elementui+webpack单页改多页的经验就到这里了。我这里展示的是一个简单的后台管理系统。使用iframe模拟路由跳转，非常简单易用。你可以在本地下载这个项目，然后慢慢把你的页面搬进来，希望能帮到一些朋友。建议下载项目运行，结合项目阅读本文，否则上当受骗。gitHub：欢迎使用star在线预览：网站不稳定，最好下载到本地预览：思路一、常用实现方案：1、手动改造webpack，配置多入口，配置多出口；2.每个目录下面有一个.html文件承载示例，.js文件引入Vue等模块，.vue页面用于编写逻辑等，如图：2.改进方案1、使用node自带的模块fs动态匹配目录，动态生成入口文件，动态生成打包导出文件；2、我们写一个公共的html文件承载实例，写一个公共的js引入各种依赖，根据动态导入的.vue文件模块生成一个实例如图：3、解释下的config.jstemplate：因为我们现在只使用config.js来引入各种依赖，就像单页的mian.js一样，不同的是需要挂载的vue文件是动态的，所以我们使用localStorage来传输。我们只需要在page目录下写一个.vue文件和一个.js文件即可。在这个.js文件中我们只需要写当前对应的.vue文件所在的目录即可，不用在每个js中在目录js中写那么多导入的依赖文件：letbaseUrl="china/china"localStorage.setItem('baseUrl',baseUrl)template/config.js//如果你想使用自己创建的实例，在你的Add中单独一个js文件：letbaseUrl="noNeed"/localStorage.setItem('baseUrl',baseUrl)letbaseMounted=localStorage.getItem('baseUrl')console.log(baseMounted)import'../src/style/index.scss'//公共样式if(baseMounted==='noNeed'){//组件已经创建了自己的实例，不会再引入下面的资源from'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);//动作捕捉到挂载实例的.vue文件路径varApp=resolve=>require.ensure([],()=>resolve(require("../src/views/"+baseMounted+".vue")));newVue({el:'#app',template:'',components:{App}})总结：每次切换页面，都会先加载自己目录下的js文件。使用localStorage存放.vue的路径（当然你也可以写成'noNeed'，这样就得自己在js中引入各种依赖），引用template/config.js时，使用localStorage告诉挂载instance模板是哪个？3.最重要的webpack配置webpack的复杂我就不啰嗦了（我也是入门级玩家）。主要实现逻辑是下面的js文件。我找不到来源。不知道哪位大师研究出来的。这个js文件主要实现了webpack匹配进出文件的功能。一开始也是研究里面的research。方法，然后在原来版本的基础上修改了几个版本来达到现在的效果，主要是改变了公共模板html和js，以及js的加载顺序。build下的这三个文件必须改成multipage-helper.js中的方法multipage-helper.js:varpath=require('path')varfs=require("fs")constresolve=(p)=>path.resolve(__dirname,"..",p)varHtmlWebpackPlugin=require('html-webpack-plugin')consttemplatePath=resolve("template/index.html")consttemplateJs="./template/config.js"varmoduleList//缓存多页模块列表varmoduleRootPath='./src/views'//模块根目录（这个可以根据需要命名）/***获取js入口数组*/exports.getEntries=functiongetEntries(){//缓存js入口数组varentries={}//初始化模块列表this.getModuleList()//可变模块列表moduleList.forEach(function(module){if(module.moduleID!=""&&module.moduleJS!=""){entries[module.moduleID]=module.moduleJS}})entries.app=templateJsconsole.log("***********************************条目*************************************")console.log(entries)returnentries}/***获取多页模块列表*@returns{模块信息收集}*/exports.getModuleList=functiongetModuleList(){//判断是否是empty,no为空则直接返回if(moduleList){returnmoduleList}else{//如果为空，则读取列表moduleList=newArray();readDirSync(moduleRootPath,"")console.log("***********************************moduleList**********************************")console.log(moduleList)returnmoduleList}}/***获取开发者的Html模板集合*@returns{dev的Html模板集合}*/exports.getDevHtmlWebpackPluginList=functiongetDevHtmlWebpackPluginList(){console.log("************************************devHtmlWebpackPluginList***********************************”)//缓存devHtml模板集合vardevHtmlWebpackPluginList=[]//获取多页模块集合varmoduleList=this.getModuleList()//遍历生成模块的HTML模板moduleList.forEach(function(mod){//生成配置varconf={filename:mod.moduleID+".html",template:mod.moduleHTML?mod.moduleHTML:templatePath,chunks:[mod.moduleID,'app'],chunksSortMode:'manual',inject:true}console.log(conf)//添加HtmlWebpackPlugin对象devHtmlWebpackPluginList.push(newHtmlWebpackPlugin(conf))})returndevHtmlWebpackPluginList}/***获取prod的Html模板集合*@returns{prod的Html模板集合}*/exports.getProdHtmlWebpackPluginList=functiongetProdHtmlWebpackPluginList(){console.log("****************************************prodHtmlWebpackPluginList**************************************")//缓存dev的Html模板集合varprodHtmlWebpackPluginList=[]//获取多页模块集合varmoduleList=this.getModuleList()//遍历生成模块的HTML模板moduleList.forEach(function(mod){//生成配置varconf={filename:mod.moduleID+".html",template:mod.moduleHTML?mod.moduleHTML:templatePath,inject:true,minify:{removeComments:true,collapseWhitespace:true,removeAttributeQuotes:true//更多选项：//https://github.com/kangax/html-minifier#options-quick-reference},//必须通过CommonsChunkPluginchunksSortMode:'dependenc持续处理多个块y',chunks:['manifest','vendor',mod.moduleID,'app'],chunksSortMode:'manual'}console.log(conf)//添加HtmlWebpackPlugin对象prodHtmlWebpackPluginList.push(newHtmlWebpackPlugin(conf))})returnprodHtmlWebpackPluginList}/***深入遍历目录，组织多页模块*@parampath需要变量路径*@parammoduleName模块名*/functionreadDirSync(path,moduleName){//缓存模块对象varmodule={moduleID:"",moduleHTML:"",moduleJS:""}//获取当前模块IDvarmoduleID=path.replace(moduleRootPath+"/","")if(path==moduleRootPath){moduleID=""}module.moduleID=moduleID//获取目录下所有文件和文件夹varpa=fs.readdirSync(path)pa.forEach(function(ele,index){varinfo=fs.statSync(path+"/"+ele)if(info.isDirectory()){//console.log("dir:"+ele)readDirSync(path+"/"+ele,ele)}else{//判断当前是否为html模块存在if(moduleName+".html"==ele){module.moduleHTML=path+"/"+ele}//module.moduleHTML=templatePath//判断当前模块的js是否存在if(moduleName+".js"==ele){module.moduleJS=path+"/"+ele}//console.log("file:"+ele)}})//判断模块是否真实（可能只是层级目录）moduleJS!="")){moduleList.push(module)}}我在学习webpack，所以有些细节可能不是很清楚，但是可以用，希望大家指正，希望对大家有帮助,呵呵呵呵
