vue-cliオフ熱更新操作

3345 ワード

vue手足棚は使用中にコードを変更すると自動的にページが更新されますので、とても便利です。しかし、この熱更新機能をオフにする場合もあります。私はvue-admin-templateテンプレートを使って開発しました。だから変更もこのテンプレートに基づいています。
buildフォルダの下にwebpack.dev.com nf.jsファイルがあります。
その後、構成項目を追加します。inline:falseは熱更新操作をオフにできます。

知識を補充します:vue多ページの熱い更新の緩慢な原因と解決方法
熱更新が遅い原因
多ページはつまり多くのエントランスで、複数のhtmlファイルを生成します。これまではほぼ1ページだったので、この問題は入り口だけではなく、複数のページにたまたま触れた項目の中で、熱更新が遅いことに気づきました。これは当然ながら、気分が悪いので、方法を調べ始めます。2、3分かかるかもしれません。これとwebpackのセットの中のHtmlWebpackPluginプラグインの性能に問題があります。これを作成するファイルが多いと遅くなります。多ければ多いほど遅くなります。原因はこのようにして、次は解決方法です。
解決方法

// 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/*」です。すべてのファイルを説明します。ここではただpersonter 1の下のファイルが必要です。もし他の機能を開発するなら、パスを別のファイルパスに変えます。これで解決します。足りないところはご指摘ください。
以上のこのvue-cliは熱更新操作をオフにして、小編集が皆さんに提供した内容を全部共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。