vue-cli 关闭热更新操作

2024-12-23 15:42:03

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

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

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

补充知识： 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 关闭热更新操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Vue CLI2升级至Vue CLI3的方法步骤

以下备忘升级至 Vue CLI 3.x 版本后,将项目目录改为新结构时所需做的一些改动. 1. 卸载与安装 npm uninstall vue-cli -g npm install -g @vue/cli 注:若要使用 Vue CLI 3,需将 Node 版本升级至 8.9 及以上. 当使用 nvm 管理 node 版本时,可以使用如下方式切换至需求的 Node 版本: # 安装 >= 8.9 的某个版本 nvm install 8.12.0 # 在当前 session 中使用该版本 nvm u
vue-cli3全面配置详解

本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目配置环境变量通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境在项目根目录中新建.env, .env.production, .env.analyz等文件只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO
vue Cli 环境删除与重装教程 - 版本文档

vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的命令. vue-cli 的卸载: 如果原来已经安装了vue-cli的话需要先卸载原来的安装 npm uninstall vue-cli -g vue-cli 的安装: 1. 版本低于3.0 (vue-cli<3.0) npm
vue-cli3项目打包后自动化部署到服务器的方法

一.安装 scp2 npm install scp2 --save-dev 二.写好脚本例如 upload.js (下面任选一个即可) 位置和 package.json平级即可. 简略版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',
vue-cli 关闭热更新操作

vue 手脚架在使用过程中,更改代码会自动更新页面,非常的方便,但是有些情况向关闭掉这热更新功能,我使用的是vue-admin-template模板来开发的,所以更改也是基于这个模板的. 在build文件夹下有个webpack.dev.conf.js文件. 然后添加一个配置项:inline: false 即可关闭热更新操作. 补充知识: vue多页面热更新缓慢原因以及解决方法热更新慢的原因多页面就是多入口,会生成多个html文件,之前我基本都是单页面,因为是单入口没有这个问题,当偶然间接触了
vue 如何开启或关闭热更新

目录开启或关闭热更新 vs开发vue,无法热更新开启或关闭热更新在vue-cli工程中,webpack默认是自动启动热更新. 如果不想使用热更新,则需要打开 vue.config.js 文件,找到 devServer,增加 inline: false ,默认情况下是没有这个变量的,如果需要取消热更新才添加. 找不到文件,就直接全局搜索 “devServer”,找到它,然后加上 inline: false. 重启 npm run serve,必须重启! devServer: { //
关于vue-cli3+webpack热更新失效及解决

目录 vue-cli3+webpack热更新失效 1.说下起因 2.解决方案不能进行热更新问题解决办法 vue-cli3+webpack热更新失效 1.说下起因 A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效.vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装:npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用. github有类似问题h
vue+ElementUI 关闭对话框清空验证,清除form表单的操作

前面跟大家提到过 elementUI验证的问题,那么今天就来看看点击对话框和关闭按钮怎么清空验证,清空form表单,避免二次点击还会有验证错误的提示 1.首先在你的对话框取消按钮加一个click事件,例如:(ps::callOf里面的addGroupData和ref一一对应起来) <div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGr
vue-cli3 热更新配置操作

问题: 在使用vue-cli3搭建项目之后,发现修改.vue文件里面的内容之后,页面不会自动刷新. 解决方案: 只需要在vue.config.js文件中配置一下就可以实现热更新了,如下: chainWebpack: config => { // 修复HMR config.resolve.symlinks(true); }, 是的就是这么简单. 修改一下标签里面的内容,ok可以自动更新.开森!!! 好像有点开心的太早,修改css部分的内容并没有自动更新,原来的vue.config.js中的css配
VUE 实现动态给对象增加属性，并触发视图更新操作示例

本文实例讲述了VUE 实现动态给对象增加属性,并触发视图更新操作.分享给大家供大家参考,具体如下: 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property).然而它可以使用
vue 点击其他区域关闭自定义div操作

方法一: 在外层div添加事件 @click="closeSel" html method closeSel(event){ var currentCli = document.getElementById("sellineName"); if(currentCli ){ if(!currentCli.contains(event.target)){ //点击到了id为sellineName以外的区域,隐藏下拉框 this.listLineUl = false; }
vue element 关闭当前tab 跳转到上一路由操作

方法一 this.$store.dispatch('delVisitedViews', this.$route); this.$router.go(-1); 方法二 this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1) this.$router.push(this.$st
Vue中关闭弹窗组件时销毁并隐藏操作

背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExper
Vue Vite热更新不起作用的正确解决办法

目录解决方案: 正确示例: 错误示例: 注意: 附:vue3+vite不热更新的解决方案总结解决方案: 提示:文件夹名称严格注意大小写 router 路由中名称和文件夹(目录), 文件名需要保证大小写一致正确示例: { path: 'show', component: () => import("@/views/show/index.vue"), } show 目录名index.vue 文件名这样大小写都是与路由中一致的就不会出现问题错误示例: { path: 'sh

vue-cli 关闭热更新操作

相关推荐

随机推荐