5
我已經在現有項目上設置了vue + vue-loader + HMR。vue-loader上的熱重載僅適用於模板的結構更改
它工作得很好，vue組件被正確加載和渲染。
熱模塊重載部分配置和加載。
但是，當更改僅爲組件的文本節點時，它似乎無法應用更新。
舉例來說，如果我有這樣的組件：
<template lang="html">
<div>
<h1>I'm a Component</h1>
</div>
</template>
<script>
export default {
}
</script>
，我又把它改成這樣：
<template lang="html">
<div>
<h1>I'm a Component updated</h1>
</div>
</template>
<script>
export default {
}
</script>
然後，我可以看到在瀏覽器控制檯中的HMR更新。
但該組件沒有更新，它仍然說：「我是一個組件」。
但是，如果我稍微改變了組件的這樣的HTML結構：
<template lang="html">
<div>
<h1>I'm a Component updated</h1>
<p>do it</p>
</div>
</template>
<script>
export default {
}
</script>
然後控制檯顯示的HMR日誌，但這次的組件更新。
行爲始終如一，文字更改=無更新。
加載程序沒有任何特別的配置。
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
}
開發服務器是通過一飲而盡推出這個任務：
// Start a webpack-dev-server
const hot_webpack_config = cloneDeep(webpack_config)
hot_webpack_config.output.filename = 'frontend.hot.js'
hot_webpack_config.output.publicPath = PUBLIC_DEV_SERVER
hot_webpack_config.entry.unshift("webpack-dev-server/client?"+PUBLIC_DEV_SERVER, "webpack/hot/dev-server");
hot_webpack_config.plugins.push(new webpack.HotModuleReplacementPlugin())
var compiler = webpack(hot_webpack_config)
var WebpackDevServer = require("webpack-dev-server")
new WebpackDevServer(compiler, {
//noInfo: true,
hot: true,
stats: {
assets: false,
colors: true,
version: false,
timings: false,
chunks: false,
chunkModules: false
},
inline: true,
publicPath: hot_webpack_config.output.publicPath,
headers: { "Access-Control-Allow-Origin": "*" }
}).listen(4000, "localhost", function(err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err)
// Server listening
gutil.log(chalk.blue("Hot server listening at http://0.0.0.0:4000"))
})
不知道還有什麼地方可以看解決這個問題。如前所述，它有點作用，只是不適用於文本節點更新。
我看過vue-cliwebpack-simple示例生成的模板，代碼有點類似（除了dev服務器是從節點命令行啓動而不是手動構建它的），他們更新文本節點，我的沒有:(
任何線索
更新：版本相關的依賴
vue 2.3.4
vue-loader 13.0.0
vue-template-compiler 2.3.4
webpack 2.6.1
webpack-dev-server 2.5.0
更新2：對組件的<script>部分應用任何修改都會導致文本節點刷新。
更新3：
// webpack_config.js
/* jshint node: true */
var webpack = require('webpack'),
path = require('path'),
package = require('./package.json'),
gutil = require('gulp-util'),
chalk = require('chalk');
const PUBLIC_DEV_SERVER = package.config.build.PUBLIC_DEV_SERVER
const ENTRY = package.config.build.ENTRY
var PROD = process.env.NODE_ENV == 'production';
let config = {
entry: [
ENTRY
],
output: {
path: path.join(__dirname, 'resources', 'js'),
filename: 'frontend.min.js'
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
}
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0'],
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
if (process.env.NODE_ENV === 'production') {
gutil.log(chalk.red("Build for production"));
config.devtool = '#source-map'
config.entry = [
ENTRY
];
// http://vue-loader.vuejs.org/en/workflow/production.html
config.plugins = (config.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
} else {
gutil.log(chalk.red("Build for development"));
config.devtool = '#eval-source-map' //"cheap-module-eval-source-map"
config.plugins = [
]
}
module.exports = config
PUBLIC_DEV_SERVER設置爲"http://localhost:4000/"
ENTRY設置爲"./src/js/frontend.js"
你有鏈接到一個git回購試試嗎？ –
@francoisromain它不處於輕鬆放入回購的狀態，但我很樂意提供任何特定的相關文件，如果您需要... – Ben
您能顯示'webpack_config'嗎？ –