详解如何使用 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 相关文章推荐
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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数组及条件,循环语句学习
2012/11/11 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
JS实现分页导航效果
2020/02/19 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python实现简单温度转换的方法
2015/03/13 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
自荐信格式的六要素
2013/09/21 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
公司活动邀请函
2014/01/24 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
平安工地建设方案
2014/05/06 职场文书
小学教育见习报告
2014/10/31 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
围城读书笔记
2015/06/26 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers