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增加join方法的实现代码
Nov 28 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
SVG描边动画
Feb 23 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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实现倒计时功能
2020/11/16 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue组件name的作用小结
2018/05/23 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
详解Python字符串对象的实现
2015/12/24 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
基于pandas中expand的作用详解
2019/12/17 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
争先创优活动总结
2014/08/27 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
鲁迅故居导游词
2015/02/05 职场文书
营业员岗位职责
2015/02/11 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Python开发五子棋小游戏
2022/04/28 Python