HMR sends request to wrong port

[annyanich]

EDIT: I have found the solution! I had to set publicPath: 'http://localhost:8080/' in vue.config.js.

A useful tool I found to debug this was "Don't empty log" in Firefox's developer tools, which allows you to view console messages even after the page reloads or redirects to another url. Using this, I was able to view the source code line where in Webpack where the hot reload url was generated and figure out that __webpack_public_path__ was involved.

Original post:

Hi there,

I'm developing a PHP app with a Vue component. During development, I have my PHP app running on Apache at localhost:80, and I have the Vue-CLI dev server (vue-cli-service serve) running at localhost:8080. In my PHP template, I use two script tags to embed my Vue app in dev mode:

<!----- On localhost:80/studip/my-plugin.php !---->
<div id="vueMountPoint"></div>
<script src="http://localhost:8080/js/app.js"></script>
<script src="http://localhost:8080/js/chunk-vendors.js"></script>

My Vue app loads without issues. However, when I make a change to e.g. a component's template or its style, the page completely reloads, rather than hot-reloading.

By making a screen recording, I was able to observe that, right before the page reloads, an attempt is made to load the hot-update.json from the wrong url, resulting in a 404 error:

Immediately after this error occurs, the page reloads.

This GET http://localhost/3804c12f252b3190abed.hot-update.json is using the wrong port, right? It should be http://localhost:8080/3804c12f252b3190abed.hot-update.json in order to reach my dev server.

Can anyone help me fix this?

Of course, it may be possible to configure an appropriate redirect in Apache to overcome this problem temporarily, but I would rather not make it necessary for every developer on my team to do that.

All the best,
Ann

(more infos: I set my project up with Vue 3 using @vue/[email protected], and my package.json is below.)

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@types/uuid": "^8.3.1",
    "core-js": "^3.6.5",
    "immer": "^9.0.6",
    "uuid": "^8.3.2",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vuex": "^4.0.0-0",
    "vuex-module-decorators": "^1.0.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.4.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

[annyanich]

Marking as solved. I had to set publicPath: 'http://localhost:8080/' in vue.config.js.