详解如何使用 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 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
基于JSON数据格式详解
Aug 31 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
简单了解JavaScript异步
May 23 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 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 批量删除数据的方法分析
2009/10/30 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php实现两个数组相加的方法
2015/02/17 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
通过代码实例了解Python sys模块
2020/09/14 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
会计学自荐信
2014/06/03 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
如何使用python包中的sched事件调度器
2022/04/30 Python