vue-cli 关闭热更新操作


Posted in Javascript onSeptember 18, 2020

vue 手脚架在使用过程中,更改代码会自动更新页面,非常的方便,但是有些情况向关闭掉这热更新功能,我使用的是vue-admin-template模板来开发的,所以更改也是基于这个模板的。

在build文件夹下有个webpack.dev.conf.js文件。

然后添加一个配置项:inline: false 即可关闭热更新操作。

vue-cli 关闭热更新操作

补充知识: vue多页面热更新缓慢原因以及解决方法

热更新慢的原因

多页面就是多入口,会生成多个html文件,之前我基本都是单页面,因为是单入口没有这个问题,当偶然间接触了一个多页面的项目发现了热更新很慢的问题,这当然很不舒服,就开始查方法,可能要2,3分钟,这个和webpack配置里面的 HtmlWebpackPlugin 插件性能有问题当生成html文件多的时候会很慢,越多越慢。原因就是这样,下面是解决方法。

解决方法

// An highlighted block
'use strict';
const path = require('path');
const glob = require('glob');
const config = require('../config');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

exports.getPages = function () {
 const pages = [];

 const globpath = './src/pages/personCenter1';
 const _pages = glob.sync(globpath);
 for (let page of _pages){
 pages.push({
  static:glob.sync(path.join(__dirname, '..', page) + '/static')[0], //各个static目录绝对路径
  name:path.basename(page),
  html:glob.sync(page + '/app.html')[0],
  js:page + '/app.js',
 })
 }
 return pages;
};

exports.getEntries = function () {
 const pages = exports.getPages();

 const entries = {};
 for (let page of pages) {
 entries[page.name] = page.js;
 }
 return entries;
};

exports.getHtmlWebpackPlugins = function () {
 const pages = exports.getPages();

 const htmls = [];
 let html;
 for (let page of pages) {
 html = new HtmlWebpackPlugin({
  filename: `${config.build.index}/${page.name}.html`,
  template: page.html || path.join(__dirname, '..', 'src/index1.html'),
  inject: true,
  chunks:['manifest', 'vendor', page.name],
  minify: {
  removeComments: true,
  collapseWhitespace: true,
  // removeAttributeQuotes: true
  removeAttributeQuotes: false
  },
  chunksSortMode: 'dependency'
 });
 htmls.push(html)
 }
 return htmls;
};

glob 在webpack中应用于文件的路径处理,当搭建多页面应用时就可以使用glob对页面需要打包文件的路径进行很好的处理,当然也能在热更新的时候控制局部哪个文件下更新。

exports.getPages = function () {
 const pages = [];

 const globpath = './src/pages/personCenter1';
 const _pages = glob.sync(globpath);
 for (let page of _pages){
 pages.push({
  static:glob.sync(path.join(__dirname, '..', page) + '/static')[0], //各个static目录绝对路径
  name:path.basename(page),
  html:glob.sync(page + '/app.html')[0],
  js:page + '/app.js',
 })
 }
 return pages;
};

globpath 就是你要更新的文件,例如:const globpath = ‘./src/pages/*'; 说明所有文件,这里我只是需要personCenter1下的文件,如果你开发另一个功能,那就把路径改为另一个文件路径,至此,解决。不足之处欢迎指出。

以上这篇vue-cli 关闭热更新操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
js获取微信版本号的方法
May 12 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
EasyUI实现下拉框多选功能
Nov 07 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
Node.JS如何实现JWT原理
Sep 18 #Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 #Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 #Javascript
js实现手表表盘时钟与圆周运动
Sep 18 #Javascript
javascript实现智能手环时间显示
Sep 18 #Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 #Javascript
js实现拖拽与碰撞检测
Sep 18 #Javascript
You might like
第五章 php数组操作
2011/12/30 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python 判断自定义对象类型
2009/03/21 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
使用matplotlib画散点图的方法
2018/05/25 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
委托书样本
2014/04/02 职场文书
《春天来了》教学反思
2014/04/07 职场文书
批评与自我批评总结
2014/10/17 职场文书
参观邀请函范文
2015/02/02 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
听课评课活动心得体会
2016/01/15 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers