vue-cliオフ熱更新操作
vue手足棚は使用中にコードを変更すると自動的にページが更新されますので、とても便利です。しかし、この熱更新機能をオフにする場合もあります。私はvue-admin-templateテンプレートを使って開発しました。だから変更もこのテンプレートに基づいています。
buildフォルダの下にwebpack.dev.com nf.jsファイルがあります。
その後、構成項目を追加します。inline:falseは熱更新操作をオフにできます。
知識を補充します:vue多ページの熱い更新の緩慢な原因と解決方法
熱更新が遅い原因
多ページはつまり多くのエントランスで、複数のhtmlファイルを生成します。これまではほぼ1ページだったので、この問題は入り口だけではなく、複数のページにたまたま触れた項目の中で、熱更新が遅いことに気づきました。これは当然ながら、気分が悪いので、方法を調べ始めます。2、3分かかるかもしれません。これとwebpackのセットの中のHtmlWebpackPluginプラグインの性能に問題があります。これを作成するファイルが多いと遅くなります。多ければ多いほど遅くなります。原因はこのようにして、次は解決方法です。
解決方法
以上のこのvue-cliは熱更新操作をオフにして、小編集が皆さんに提供した内容を全部共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。
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は熱更新操作をオフにして、小編集が皆さんに提供した内容を全部共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。