详解如何使用 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编程起步(第七课)
Feb 27 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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(7) php 字符串相关应用
2010/03/05 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python中使用SAX解析xml实例
2014/11/21 Python
python简单判断序列是否为空的方法
2015/06/30 Python
python getopt详解及简单实例
2016/12/30 Python
python 图片去噪的方法示例
2019/07/09 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
性能测试工程师的面试题
2015/02/20 面试题
就业自我评价
2014/02/04 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
食品安全责任书范本
2015/05/09 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python