CODEWITHSUNDEEP
vue.jsvue-clivue-cli-3
Whiskey T.
Whiskey T.

Reputation: 243

Vue-CLI v3 app: hot module reload not working

I've installed Vue CLI v3, and in my terminal:

DONE Compiled successfully in 11889ms

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.3:8080/

Note that the development build is not optimized. To create a production build, run npm run build.

... and then, when making any change whatsoever to the Hello World component, e.g., a tweak to the css, something obvious like the link color, nothing happens; no response in the terminal, no browser refresh, and no update to the page when manually refreshing.

I've built a few apps using Vue in the past, hot module reloading was working previously, but now there is zero activity/response in the terminal regardless of what I change in any project file; only if I close the terminal tab, re-open a tab, navigate to the project directory and re-run 'npm run serve', and refresh the browser do I see the changes. obviously this is unusable. What am I missing?

Upvotes: 2

Views: 9006

Answers (5)

Emily
Emily

Reputation: 10088

My problem was with different capitalization between the folder name and router/index.js file.

My folder was name views/account/Login.vue

The router/index.js had import Login from '../views/Account/Login.vue';

The file would load correctly on npm run dev but would not hot reload when it was changed.

Changing the import to import Login from '../views/account/Login.vue'; fixed the problem.

Upvotes: 2

justnath36
justnath36

Reputation: 21

For anyone using WSL. I ran into this exact problem and solved it via this method.

I had the same issue, It seems wsl2 does not watch for file changes inside the windows filesystem. Everything works fine if the vue project is inside the Ubuntu filesystem. Check out this link for further info https://learn.microsoft.com/en-us/windows/wsl/wsl2-ux-changes.

Source: https://github.com/vuejs/vue-cli/issues/4421#issuecomment-557194129

Upvotes: 2

Aruna
Aruna

Reputation: 701

Add following script tag to package.json file

...
  "scripts": {
    "dev": "cross-env NODE_ENV=development vue-cli-service serve --open --host localhost",
     ....
  },
....

and run with

npm install –save-dev cross-env

npm run dev

source: https://www.davidyardy.com/blog/vue-cli-creating-a-project%E2%80%93issue-with-hot-reload/

Upvotes: 0

Jose Mhlanga
Jose Mhlanga

Reputation: 855

If u installed Node js as sudo, then Running sudo npm run serve worked for me. Actually node.js was installed as sudo and the project also created as sudo so when I run npm run serve the vue-hot-reload-api cannot access the node server to do hot reload

Additionally if u want the hot reload to work in offline mode, then switch off your network and then npm run serve and then reconnect to your network. That will work as localhost protocol and not use your local network IP. Cheers

Upvotes: 0

Whiskey T.
Whiskey T.

Reputation: 243

This issue has been resolved, though I am not 100% sure what caused it.

I noticed that some people with similar failures of hot reload had mentioned bad directory names. My vue project's parent directory name was legit but I had renamed it at one point (though that was multiple restarts and reinstalls ago), and I also noticed that some of the vue-cli-created project folders were not displaying in the Finder until it was quit and restarted. I figured there was something corrupted about that folder. I created a new folder - a sibling of the dubious folder - and had another go with vue-cli, and it worked as expected.

Hope this helps someone. Thanks again to those of you who offered suggestions.

Whiskey T.

Upvotes: 4

Related Questions