6

我已经在现有项目上设置了 vue + vue-loader + HMR。

它工作得很好，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: {
    }

}

开发服务器通过 gulp 启动，执行以下任务：

// 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-cli webpack-simple示例生成的模板，代码有点相似（除了开发服务器是从节点命令行启动而不是手动构建它），他们的更新文本节点，我的没有:(

有什么线索吗？

更新：相关依赖的版本

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"

4

1 回答 1

3

我已经尝试了多种方法来解决这个问题，我认为一些设置可以解决它，但恢复到以前的版本也突然开始工作了。

最后，我认为解决方法很简单：

rm -rf node_modules/
npm i

但我不知道到底是哪一部分让它分崩离析。

于 2017-07-17T06:59:54.337 回答