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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JS图片预加载插件详解
Jun 21 Javascript
Angular5.1新功能分享
Dec 21 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
vue element upload实现图片本地预览
Aug 20 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
解决Django中多条件查询的问题
2019/07/18 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
介绍一下MD5加密算法
2016/11/12 面试题
销售自荐信
2013/10/22 职场文书
小班重阳节活动方案
2014/02/08 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
班主任寄语大全
2014/04/04 职场文书
活动宣传策划方案
2014/05/23 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL