vue-cli 關閉熱更新操作

更新時間：2020年09月18日 14:46:54 作者：朝如青絲暮成雪

這篇文章主要介紹了vue-cli 關閉熱更新操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue 手腳架在使用過程中，更改代碼會自動更新頁面，非常的方便，但是有些情況向關閉掉這熱更新功能，我使用的是vue-admin-template模板來開發(fā)的，所以更改也是基于這個模板的。

在build文件夾下有個webpack.dev.conf.js文件。

然后添加一個配置項：inline: false 即可關閉熱更新操作。

補充知識： vue多頁面熱更新緩慢原因以及解決方法

熱更新慢的原因

多頁面就是多入口，會生成多個html文件，之前我基本都是單頁面，因為是單入口沒有這個問題，當偶然間接觸了一個多頁面的項目發(fā)現(xiàn)了熱更新很慢的問題，這當然很不舒服，就開始查方法，可能要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下的文件，如果你開發(fā)另一個功能，那就把路徑改為另一個文件路徑，至此，解決。不足之處歡迎指出。

以上這篇vue-cli 關閉熱更新操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: