vue-cli实现多页面多路由的示例代码
项目下载地址 vue-cli多页面多路由项目示例 :vue+webpack+vue-router+vuex+mock+axios UsageThis is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目。 PC端:后台管理页面,单独的页面入口,单独的路由。 移动端:业务展示页面,单独的页面入口,单独的路由。 踩了无数的坑,终于是初见效果了,随后继续优化更新 Installserve with hot reload at localhost:8088
npm run dev build for production with minificationnpm run build 使用Nginx服务器进行访问,地址如下: PC端 http://localhost/modules/index.html 移动APP http://localhost/modules/index.html 多页面配置vue2.0版本多页面入口,是由webpack配置来完成的,我的项目文件结构如下 modules下为多个页面入口,文件名称保持一致,如: .vue文件名称任意。 原则上这些文件名称都可以随意定,但由于下面entry入口函数的限定,换成其他名字可以会找不到。如果想要起其他文件名,请相应修改getMultiEntry()函数。 until.jsuntil.js中添加getMultiEntry(),依赖 glob插件,需要提前下载好,until.js开始引入 glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry,path.extname(entry)); tmp = entry.split('/').splice(-4); var pathsrc = tmp[0]+'/'+tmp[1]; return entries; ~buildwebpack.base.conf.js找到entry,添加多入口 运行、编译的时候每一个入口都会对应一个Chunk。 PS:终于明白这个chunk的含义了/(ㄒoㄒ)/~~ ~buildwebpack.dev.conf.js文末添加以下配置: 其中config.moduleName = 'modules' ~buildwebpack.prod.conf.js//构建生成多页面的HtmlWebpackPlugin配置,主要是循环生成
var pages = utils.getMultiEntry('./src/'+config.moduleName+'/*/.html'); for (var pathname in pages) { var conf = { filename: pathname + '.html',// 模板路径 chunks: ['vendor',pathname],// 每个html引用的js模块 inject: true,// js插入位置 hash:true }; webpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); 其中config.moduleName = 'modules' 至此,多页面的配置已经完成。访问地址为: index : http://localhost:8088/modules/index.html phone : http://localhost:8088/modules/phone.html Browser SupportModern browsers and Internet Explorer 10+. snapshotsLicenseMIT 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |