快捷導(dǎo)航

vue-cli 關(guān)閉熱更新操作

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

這篇文章主要介紹了vue-cli 關(guān)閉熱更新操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

在build文件夾下有個(gè)webpack.dev.conf.js文件。

然后添加一個(gè)配置項(xiàng)：inline: false 即可關(guān)閉熱更新操作。

補(bǔ)充知識(shí)： vue多頁(yè)面熱更新緩慢原因以及解決方法

熱更新慢的原因

多頁(yè)面就是多入口，會(huì)生成多個(gè)html文件，之前我基本都是單頁(yè)面，因?yàn)槭菃稳肟跊](méi)有這個(gè)問(wèn)題，當(dāng)偶然間接觸了一個(gè)多頁(yè)面的項(xiàng)目發(fā)現(xiàn)了熱更新很慢的問(wèn)題，這當(dāng)然很不舒服，就開(kāi)始查方法，可能要2，3分鐘，這個(gè)和webpack配置里面的 HtmlWebpackPlugin 插件性能有問(wèn)題當(dāng)生成html文件多的時(shí)候會(huì)很慢，越多越慢。原因就是這樣，下面是解決方法。

解決方法

// 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], //各個(gè)static目錄絕對(duì)路徑
  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中應(yīng)用于文件的路徑處理，當(dāng)搭建多頁(yè)面應(yīng)用時(shí)就可以使用glob對(duì)頁(yè)面需要打包文件的路徑進(jìn)行很好的處理，當(dāng)然也能在熱更新的時(shí)候控制局部哪個(gè)文件下更新。

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], //各個(gè)static目錄絕對(duì)路徑
  name:path.basename(page),
  html:glob.sync(page + '/app.html')[0],
  js:page + '/app.js',
 })
 }
 return pages;
};

globpath 就是你要更新的文件，例如：const globpath = ‘./src/pages/*'; 說(shuō)明所有文件，這里我只是需要personCenter1下的文件，如果你開(kāi)發(fā)另一個(gè)功能，那就把路徑改為另一個(gè)文件路徑，至此，解決。不足之處歡迎指出。

以上這篇vue-cli 關(guān)閉熱更新操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: