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中dialog属性小记
Sep 03 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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
DISCUZ 分页代码
2007/01/02 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
J2EE面试题大全
2016/08/06 面试题
致铅球运动员加油稿
2014/02/13 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
高中军训感言600字
2014/03/11 职场文书
国际会计专业求职信
2014/08/04 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python