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'吗？ –