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 相关文章推荐
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
react实现antd线上主题动态切换功能
Aug 12 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
JavaScript实现点击自制菜单效果
Feb 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连接和操作MySQL数据库基础教程
2014/09/29 PHP
php中动态变量用法实例
2015/06/10 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
js函数排序的实例代码
2013/07/01 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
如何快速上手Vuex
2017/02/14 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
什么是Remote Module
2016/06/10 面试题
超市营业员岗位职责
2013/12/20 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
行政处罚事先告知书
2015/07/01 职场文书
《青山不老》教学反思
2016/02/22 职场文书
导游词之青岛崂山
2019/12/27 职场文书
详解Python牛顿插值法
2021/05/11 Python
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Python中json.dumps()函数的使用解析
2021/05/17 Python
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python