详解如何使用 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 相关文章推荐
浅析Prototype的模板类 Template
Dec 07 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
详解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转成EXE文件
2006/10/09 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python cs架构实现简单文件传输
2020/03/20 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python实现分数序列求和
2020/02/25 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python 实现音频叠加的示例
2020/10/29 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
MYSQL支持事务吗
2013/08/09 面试题
护士求职信范文
2014/05/24 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
鲁迅故里导游词
2015/02/05 职场文书
初中运动会前导词
2015/07/20 职场文书
新学期主题班会
2015/08/17 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
MySQL中order by的执行过程
2022/06/05 MySQL
box-shadow单边阴影的实现
2023/05/21 HTML / CSS