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 相关文章推荐
常规表格多表头查询示例
Feb 21 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
package.json文件配置详解
Jun 15 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue.config.js常用配置详解
Nov 14 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 学习路线与时间表
2010/02/21 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Python入门篇之字典
2014/10/17 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python ldap实现登录实例代码
2016/09/30 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
pycharm的python_stubs问题
2020/04/08 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
python matplotlib库的基本使用
2020/09/23 Python
python定义具名元组实例操作
2021/02/28 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
学生自我鉴定模板
2013/12/30 职场文书
超市中秋节促销方案
2014/03/21 职场文书
超市开店计划书
2014/04/26 职场文书
住宅质量保证书
2014/04/29 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书