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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
jQuery 入门级学习笔记及源码
Jan 22 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
JavaScript入门学习书籍推荐
2008/06/12 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python 快速排序代码
2009/11/23 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python实现随机漫步功能
2018/07/09 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
python 解决函数返回return的问题
2020/12/05 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
项目采购员岗位职责
2014/04/15 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
停电通知范文
2015/04/16 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
2016党员党课心得体会
2016/01/07 职场文书
电工生产实习心得体会
2016/01/22 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python