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 自定义函数写法分享
Mar 30 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
Vue按需加载的具体实现
Dec 02 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 Directory 函数的详解
2013/03/07 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python函数的5种参数详解
2017/02/24 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
linux面试题参考答案(8)
2015/08/11 面试题
暑假实习求职信范文
2013/09/22 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
继续教育个人总结
2015/03/03 职场文书
幸福终点站观后感
2015/06/04 职场文书