vue-cli实现多页面多路由的示例代码


Posted in Javascript onJanuary 30, 2018

项目下载地址 vue-cli多页面多路由项目示例 :vue+webpack+vue-router+vuex+mock+axios

Usage

This is a project template for vue-cli.

github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目。

PC端:后台管理页面,单独的页面入口,单独的路由。

移动端:业务展示页面,单独的页面入口,单独的路由。

踩了无数的坑,终于是初见效果了,随后继续优化更新

Install

# install dependencies
npm install

# serve with hot reload at localhost:8088
npm run dev

# build for production with minification
npm run build

使用Nginx服务器进行访问,地址如下:

PC端 http://localhost/modules/index.html

移动APP http://localhost/modules/index.html

多页面配置

vue2.0版本多页面入口,是由webpack配置来完成的,我的项目文件结构如下

webpack
   |---build
   |---config
   |---dist 
   |---route 路由
   |---src
    |---api axios请求
    |---assets 资源
    |---common 公共js资源目录
    |---components组件
    |---modules各个模块
     |---index  index模块
      |---views 组件
      |---index.html
      |---index.js
      |---index.vue
     |---phone    phone模块
      |---phone.html
      |---phone.js
      |---phone.vue
      |---phone 组件

modules下为多个页面入口,文件名称保持一致,如:

modules
 |---index
  |---index.html
  |---index.js

.vue文件名称任意。

原则上这些文件名称都可以随意定,但由于下面entry入口函数的限定,换成其他名字可以会找不到。如果想要起其他文件名,请相应修改getMultiEntry()函数。

until.js

until.js中添加getMultiEntry(),依赖 glob插件,需要提前下载好,until.js开始引入

//获取多级的入口文件
exports.getMultiEntry = function (globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-4);

 var pathsrc = tmp[0]+'/'+tmp[1];
 if( tmp[0] == 'src' ){
  pathsrc = tmp[1];
 }
 //console.log(pathsrc)
  pathname = pathsrc + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
  //console.log(pathname+'-----------'+entry);
 });

 return entries;
}

~\build\webpack.base.conf.js

找到entry,添加多入口

entry:entries,

运行、编译的时候每一个入口都会对应一个Chunk。 PS:终于明白这个chunk的含义了/(ㄒoㄒ)/~~

~\build\webpack.dev.conf.js

文末添加以下配置:

var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html');
for (var pathname in pages) {
 // 配置生成的html文件,定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname], // 模板路径
  chunks: [pathname, 'vendors', 'manifest'], // 每个html引用的js模块
  inject: true       // js插入位置
 };
 // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

其中config.moduleName = 'modules'

~\build\webpack.prod.conf.js

...

//构建生成多页面的HtmlWebpackPlugin配置,主要是循环生成
var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html');
for (var pathname in pages) {
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname], // 模板路径
  chunks: ['vendor',pathname], // 每个html引用的js模块
  inject: true,       // js插入位置
 hash:true
 };

 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
module.exports = webpackConfig

其中config.moduleName = 'modules'

至此,多页面的配置已经完成。访问地址为:
index : http://localhost:8088/modules/index.html
phone : http://localhost:8088/modules/phone.html

Browser Support

Modern browsers and Internet Explorer 10+.

snapshots

vue-cli实现多页面多路由的示例代码

vue-cli实现多页面多路由的示例代码

vue-cli实现多页面多路由的示例代码

License

MIT

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
5 种JavaScript编码规范
Jan 30 #Javascript
vue源码入口文件分析(推荐)
Jan 30 #Javascript
Vue精简版风格指南(推荐)
Jan 30 #Javascript
详解javascript常用工具类的封装
Jan 30 #Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 #Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
js自定义瀑布流布局插件
2017/05/16 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
python获取本机外网ip的方法
2015/04/15 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python interpolate插值实例
2020/07/06 Python
Python pip 常用命令汇总
2020/10/19 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
员工2014年度工作总结
2014/12/09 职场文书
护士辞职信怎么写
2015/02/27 职场文书
送达通知书
2015/04/25 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技
MySQL 原理与优化之Update 优化
2022/08/14 MySQL