Question

将Vuejs与webpack一起使用。

我安装了vue hot reload：

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

然后我启动webpack dev服务器，并能够查看页面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"
  }
}

Answer 1

在我在 webpack.config.js 中添加 publicPath：dist / 之前，我的开发服务器无法正常工作如果你遇到像我这样的问题，也许你可以尝试一下。

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

vue hot reload not reload

1 个答案: