Vue热重载无法重新加载

Question

使用webpack与Vuejs。

我已经安装了Vue热重载：

"vue-hot-reload-api": "^2.0.6"

然后我启动webpack开发服务器，可以通过 http://localhsot:8080 查看页面:

webpack-dev-server --inline --hot

问题：页面没有自动重新加载，我必须运行webpack命令才能看到更改。

---

wepack.config.js：

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './app/main.js',
  // Where should the compiled file go?
  output: {
    // To the `dist` folder
    path: './dist',
    // With the filename `build.js` so it's dist/build.js
    filename: 'build.js'
  },
  module: {
    // Special compilation rules
    loaders: [
      {
        // Ask webpack to check: If this file ends with .js, then apply some transforms
        test: /\.js$/,
        // Transform it with babel
        loader: 'babel',
        // don't transform node_modules folder (which don't need to be compiled)
        exclude: /node_modules/
      },
      {
          test: /\.vue$/,
          loader: 'vue'
      }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  vue: {
    loaders: {
      js: 'babel'
    }
  }
}

package.json:

{
  "name": "xx",
  "version": "0.0.1",
  "description": "xx",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "vue",
    "electron"
  ],
  "author": "xx",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "electron": "^1.3.5",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "pouchdb": "^6.0.4",
    "vue": "^1.0.26",
    "vue-resource": "^1.0.1",
    "vue-router": "^0.7.13"
  }
}

- Alvin

---

请分享您的webpack配置和package.json。 - Linus Borg

@LinusBorg更新了我的问题，谢谢。 - Alvin

我一直在使用这个模板，对我很有效。https://github.com/vuejs-templates/webpack - Deepak

我已将vue-hot-reload-api降级到版本1，但仍然无法正常工作。 - Alvin

尝试使用vue-cli引导程序，它已经设置好了这个。 - vbranden

也许这个修复方法对你有用（对我有效）https://github.com/vuejs-templates/webpack/issues/378#issuecomment-263466173 - Paolo

Answer 1

在我添加了 publicPath: dist/ 到 webpack.config.js 后，我的开发服务器才开始工作。
如果你也遇到了相同的问题，或许可以尝试一下这个方法。

output: {
    path: './dist',
    filename: 'build.js',
    // ↓↓↓↓↓add this to make dev-server working
    publicPath: 'dist/', 
}

- Webb Lu