Vue-cli-service: watch for file changes/recompile when edit-CodePudding

I'm currently building a Vue.js app using vue/[email protected].

The issue I'm having is that whenever I change a .vue file, the server does not recompile, restart, or do anything.

I use this command (through package.json) to run the server in development environment:

NODE_ENV=development vue-cli-service serve

My vue.config.js file is:

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    hot: true
  },
  publicPath: '/'
}

This is the output, and it does not change if I edit a file while the server is running:

 DONE  Compiled successfully in 17169ms                                                                                                                                      12:01:45 PM


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

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

EDIT: I would like to add that a friend who is working on the same project and who start the server the same way as I do has the expected watch/reload feature. Is there a hidden environment variable to set or something?

I also would like to add that I'm using WSL2 to start the development server.

Thanks for your help!

CodePudding user response：

Ok, I found something.

This is an issue with WSL2 not being able to trigger file change notifications: https://github.com/microsoft/WSL/issues/4739 .

I tried using Vite and with adding:

server: {
  watch: {
    usePolling: true
  }
}

To the vite.config.js, it does work properly with WSL2 as explained here.

CodePudding user response：

The issue with several environments is that environment HOST address is not set right. Just to make have a common environment, using Docker might help. I've tested this Docker Vue Hot-Reload template on Windows and Macs. Hope it helps.

PS: I created this template.