详解如何使用 vue-cli 开发多页应用


Posted in Javascript onDecember 16, 2017

本文介绍了如何使用 vue-cli 开发多页应用,分享给大家,具体如下:

修改的webpack配置文件

全局配置

修改 webpack.base.conf.js

打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口

entry: {
  app: './src/main.js',
  app2: './src/main2.js',
  app3: './src/main3.js',
},

运行、编译的时候每一个入口都会对应一个Chunk

run dev 开发环境

修改 webpack.dev.conf.js

打开 ~\build\webpack.dev.conf.js ,在plugins下找到new HtmlWebpackPlugin,在其后面添加对应的多页,并为每个页面添加Chunk配置

chunks: ['app']中的app对应的是webpack.base.conf.js中entry设置的入口文件

plugins:[
  // https://github.com/ampedandwired/html-webpack-plugin
  // 多页:index.html → app.js
  new HtmlWebpackPlugin({
   filename: 'index.html',//生成的html
   template: 'index.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index2.html → app2.js
  new HtmlWebpackPlugin({
   filename: 'index2.html',//生成的html
   template: 'index2.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app2']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index3.html → app3.js
  new HtmlWebpackPlugin({
   filename: 'index3.html',//生成的html
   template: 'index3.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app3']//需要引入的Chunk,不配置就会引入所有页面的资源
  })
]

run build 编译

修改 config/index.js

打开~\config\index.js,找到build下的index: path.resolve(__dirname, '../dist/index.html'),在其后添加多页

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  index2: path.resolve(__dirname, '../dist/index2.html'),
  index3: path.resolve(__dirname, '../dist/index3.html'),
},

修改 webpack.prod.conf.js

打开~\build\webpack.prod.conf.js,在plugins下找到new HtmlWebpackPlugin,在其后面添加对应的多页,并为每个页面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 build

plugins: [
  // 多页:index.html → app.js
  new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index2.html → app2.js
  new HtmlWebpackPlugin({
    filename: config.build.index2,
    template: 'index2.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app2']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index3.html → app3.js
  new HtmlWebpackPlugin({
    filename: config.build.index3,
    template: 'index3.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app3']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
]

如果页面比较多,可以考虑使用循环将 HtmlWebpackPlugin 添加到 plugins

// utils.js
exports.getEntry = function(globPath, pathDir) {
  var files = glob.sync(globPath);
  var entries = {},
    entry, dirname, basename, pathname, extname;

  for (var i = 0; i < files.length; i++) {
    entry = files[i];
    dirname = path.dirname(entry);
    extname = path.extname(entry);
    basename = path.basename(entry, extname);
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
    entries[pathname] = ['./' + entry];
  }
  return entries;
}
// webpack.base.conf.js
var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));
pages.forEach(function (pathname) {
  // https://github.com/ampedandwired/html-webpack-plugin
  var conf = {
    filename: '../views/' + pathname + '.html', //生成的html存放路径,相对于path
    template: '../src/views/' + pathname + '.html', //html模板路径
    inject: false,  //js插入的位置,true/'head'/'body'/false
    /*
     * 压缩这块,调用了html-minify,会导致压缩时候的很多html语法检查问题,
     * 如在html标签属性上使用{{...}}表达式,所以很多情况下并不需要在此配置压缩项,
     * 另外,UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
     * 为避免压缩html,需要在html-loader上配置'html?-minimize',见loaders中html-loader的配置。
     */
    // minify: { //压缩HTML文件
    //   removeComments: true, //移除HTML中的注释
    //   collapseWhitespace: false //删除空白符与换行符
    // }
  };
  if (pathname in config.entry) {
    conf.favicon = 'src/images/favicon.ico';
    conf.inject = 'body';
    conf.chunks = ['vendors', pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});

同样入口 entry 也可以使用

// webpack.base.conf.js
entry: {
  app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
Vue绑定内联样式问题
Oct 17 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
详解VUE 数组更新
Dec 16 #Javascript
详解如何用模块化的方式写vuejs
Dec 16 #Javascript
浅谈 Vue 项目优化的方法
Dec 16 #Javascript
在vue-cli中组件通信的方法
Dec 16 #Javascript
动手写一个angular版本的Message组件的方法
Dec 16 #Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 #Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 #Javascript
You might like
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP单链表的实现代码
2016/07/05 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
Servlet方面面试题
2016/09/28 面试题
师范应届生教师求职信
2013/11/05 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
促销活动计划书
2014/05/02 职场文书
中学教师师德承诺书
2014/05/23 职场文书
驻村工作先进事迹
2014/08/14 职场文书
乌镇导游词
2015/02/02 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python