0

While working on a vue project, in the console I have executed: npm run watch, so when saving a small or big change in a component or some part of the vue project, I go to the console and I must give enter to start the compilation . Thus:

enter image description here

and I must give time until it ends

enter image description here

Then I must go to my browser tab where I show the project and I must refresh the entire page to see the change.

This process sometimes takes time. I ask if there is a faster way to work, that is, I make a change, I save in visual code and without refreshing the browser, can I see the change? Maybe it's some npm or visual studio code plugin

Thank you very much for the time.

Dan
  • 59,490
  • 13
  • 101
  • 110
JG_GJ
  • 755
  • 1
  • 10
  • 33

1 Answers1

1

EDIT: OP is using Laravel Homestead. Was not mentioned at first, question tag changed now.

This sounds like an old version of Vue CLI, so it may be time to update if possible. Either way, try:

npm run serve

OR

npm run dev

The standard Vue CLI dev command now is npm run serve. If these fail (unlikely), check your package.json and see what scripts are available

"scripts": {
   "serve": "[]",
   "dev": "[]"
}

Each one of these scripts is an item you can npm run. Check the Vue CLI script docs for more.

Dan
  • 59,490
  • 13
  • 101
  • 110
  • When I do npm run dev, it basically starts loading everything, but when it reaches 100%, it just ends the process in the cmd and when I run npm run serve it shows npm ERR! missing script: serve. – JG_GJ Apr 07 '20 at 15:35
  • scripts in package.json: `"scripts": { "dev": "npm run development", "development":"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",` – JG_GJ Apr 07 '20 at 15:37
  • `"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll","hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js","prod": "npm run production","production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }` – JG_GJ Apr 07 '20 at 15:38
  • Are you using Laravel? – Dan Apr 07 '20 at 15:41
  • Yes it is. I find myself running Laravel Homestead and to compile the vue part, the components I already use the CMD and I run npm run watch. – JG_GJ Apr 07 '20 at 15:52
  • Hmm. You can see in `scripts` that `npm run dev` is the correct way. The only difference between `npm run dev` and `npm run watch` is the `--watch` and `--watch-poll` flags. This may be a problem with your Laravel or Node installation or version. – Dan Apr 07 '20 at 16:06
  • You could try `npm run hot` – Dan Apr 07 '20 at 16:08
  • `npm run hot ` show this "No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.'" – JG_GJ Apr 07 '20 at 16:24
  • https://stackoverflow.com/questions/57304281/fresh-laravel-homestead-8-0-1-npm-run-dev-fails-to-compile-and-npm-ci-fails-to – Dan Apr 07 '20 at 16:34