Add a watch mode #1317

zigomir · 2018-05-17T16:30:09Z

What problem does this feature solve?

Sometimes you don't want to serve html and other build files with integrated serve command.

Requirements

watch command option needs to take into account vue.config.js's outputDir or --dest. (I'm guessing this would work out of the box even). I think it's actually same as running webpack-cli with webpack --watch.

Would you be willing to merge a PR that adds this command / command option?

What does the proposed API look like?

vue-cli-service watch

or (preferably)

vue-cli-service build --watch

The text was updated successfully, but these errors were encountered:

yyx990803 · 2018-05-18T20:54:19Z

Sure, we can take a PR for build --watch

gtso86 · 2018-06-01T16:39:43Z

This new featured have a side effect: since the hash on filename changes every time, the dist folder starting to have all old versions from the same file

Besides that, is there a way to allow other flag or something to avoid vue-cli-service build --watch add hash in the end of filename? This will helps a lot use this build process when you need run Vue.js apps inside old apps, like my actual scenario: I'm building a Vue app runing inside a legacy app, so my Vue instance is only a div inside a whole old webapp.

yyx990803 · 2018-06-01T16:46:29Z

@gtso86 during development you should use --mode development for faster rebuilds and the files will not have hashes. And we should probably default to dev mode when --watch is used... thoughts @zigomir ?

zigomir · 2018-06-01T17:04:49Z

Yeah, this makes sense. I'm always using --watch with --mode development and can't think of a good use case when you'd want to have --watch within a production mode.

Edit: Changes are now in see #1430.

akhansari · 2018-08-18T16:13:43Z

Is there any possibility to activate HMR mode with this command:
vue-cli-service build --watch --mode development.

Like: vue-cli-service build --watch --mode development --hmr

I would like to say that it's primary on not SPA environments.

yyx990803 · 2018-08-18T16:36:41Z

If you are using --watch, the files are written to disk, so it's impossible to have HMR for that.

akhansari · 2018-08-18T17:42:32Z

Yes, indeed, before I was using the webpack-hot-middleware with my existing server. But with the CLI I don't have this choice anymore.

I'll try to find an alternative solution or to make webpack-hot-middleware work with the CLI.

meteorlxy · 2018-09-12T14:43:08Z

I met two problems with vue-cli-service build --watch --mode development.

Lots of [hash].hot-update.json are being generated:

The assets files are not in the sub directory:

dashboard.js is supposed to be put into public/js dir, but it's in public/ now.

Here's my vue.config.js:

module.exports = {
  outputDir: 'public',
  
  pages: {
    dashboard: {
      entry: 'client/src/dashboard/app.js',
      template: 'client/public/index.html',
      filename: '../resources/views/dashboard.blade.php',
      chunks: ['chunk-vendors', 'chunk-common', 'dashboard']
    }
  },

  chainWebpack (config) {
    config.resolve
      .alias
        .set('@', path.resolve(__dirname, 'client/src'))
        .end()
  },
}

With version 3.0.3

anthonylebrun · 2018-09-13T04:21:54Z

I can confirm what @meteorlxy experienced:

vue-cli-service build and vue-cli-service build --watch results in a different dist directory structure.

dashboard.js is supposed to be put into public/js dir, but it's in public/ now.

vue-cli-service build also generated a css folder, whereas it doesn't wit hthe --watch option.

anthonylebrun · 2018-09-13T04:35:43Z

@meteorlxy I found a workaround, but I'm not 100% sure what the issue is or why it works. Today is my first day using vue-cli or webpack for that matter!

This issue tipped me off: #1617

Setting the NODE_ENV to production changes the output dir structure:

NODE_ENV=production vue-cli-service build --watch --mode development

If anyone would explain what's actually going on, that would be awesome :D

zigomir · 2018-09-14T01:58:12Z

@anthonylebrun @meteorlxy

1.) running vue-cli-service build --watch runs in development mode by default: reference
2.) about "dashboard.js is supposed to be put into public/js dir, but it's in public/ now": not entirely correct. When you build in development mode @vue/cli won't extract css into separate file and thus sub-directories js and css aren't needed. If you wan't to use production like build, with split directories, you can use vue-cli-service build --watch --mode production. But that will make rebuilds slower due to minification and all.

meteorlxy · 2018-09-14T04:08:12Z

@zigomir

Yeah, thanks.

I know the point, and I just found that vue-cli-service build --watch with or without --mode development has different behaviors, which means --watch is not in "really" development mode?

The css sub-dir is not necessray, but I think it's better to have the same directory structure (i.e. js sub-dir) in watch mode.

I notice that the output.filename is modified in prod.js to have js sub-dir, I think watch mode should have similar config:

vue-cli/packages/@vue/cli-service/lib/config/prod.js

Lines 6 to 9 in ce335da

    
           const filename = getAssetPath( 
        
             options, 
        
             `js/[name]${isLegacyBundle ? `-legacy` : ``}${options.filenameHashing ? '.[contenthash:8]' : ''}.js` 
        
           )

Maybe it's not good to discuss here, I'll try to open another issue for that. 😄

meteorlxy · 2018-09-14T04:11:04Z

@anthonylebrun

LOL that's really an insteresting workaround 😄 I'll try it out. Thank you!

krisimmig · 2018-10-16T13:18:10Z

I have the same problem, integrating a vuejs app into an existing website.
For that I would just need the js/css and put a <div id="app"></div> into the existing site.

For that I actually am not using the dev server but the existing website local server to render the page.

But with the current cli setup I think it is a bit complicated to do so:
The build --watch task builds the JS assets into the root folder.
The build --watch --mode production uses the /js subfolder.

So I have to either change the vuejs JS inlucde folder everytime I want to deploy the app (from root to /js), or develop in production mode.

Wouldn´t it make more sense to put the js files into the same folder regardless if we are using production or development mode?

cappe · 2018-10-23T06:33:23Z

I also support using JS (and optionally CSS) subdirectories both in development and production mode. I am currently working on a project that uses Vue with CMS. The CMS requires including assets using its own including methods, hence it'd be convenient to fetch the assets from their dedicated directories as opposed to build separate configs for development and production modes.

EDIT: I was able to compile JS files into a JS directory even in development mode when I explicitly set the webpack output filename in vue.config.js. Here's the change:

chainWebpack: (config) => {
   config
      .output
         .filename('js/[name].js');
},

jomofrodo · 2019-01-03T20:28:22Z

To create different output directories for prod vs development you can do something like this in your vue.config.js:

module.exports = {
		
  outputDir: process.env.NODE_ENV === 'production' ? 'dist/prd' : 'dist/dev',
  chainWebpack: config => {
	  config.output
	  	.filename( process.env.NODE_ENV === 'production' ? 'js/[name].js' : 'js/[name].dev.js')
	  	.chunkFilename(`js/[name].js`)
  }  

}

MasterB · 2019-01-08T15:52:01Z

same problem like @gtso86
Man, i just need "vue-cli-service build" in --watch mode with the same file and filename results!
Can it be that hard?
So file output und structure should be equal: --mode development == --mode production.
The hack was helping at moment: vue-cli-service build --watch --mode production

NateWr · 2019-01-11T12:35:39Z

Lots of [hash].hot-update.json are being generated

I also ran into this problem in a situation where I am integrating vue into an existing project and can not use the dev server, but I still want to rebuild the package automatically whenever something changes.

After much searching, the best workaround I found was to limit and restrict these files to a dir that is in .gitignore.

module.exports = {
	configureWebpack: {
		output: {
			hotUpdateChunkFilename: '<dir>/<filename>',
			hotUpdateMainFilename: '<dir>/<filename>'
		}
	}
}

I would prefer a solution that cleans them up automatically whenever they are generated, if anyone knows of one.

TatzyXY · 2019-01-27T18:08:21Z

I have the same problem.
When I build with --watch then it seems that vue-cli-service completely ignores the file vue.config.js

This is my vue.config.js

module.exports = {
    filenameHashing: false,
    publicPath: './webroot/dist/',
    outputDir: './webroot/dist/',
    chainWebpack: config => {
        config.plugins.delete('html')
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
    }
}

MarkiyanPyts · 2019-02-03T12:27:48Z

Guys for my cloud based environment I really need css files created, I do not need hot module replacement since I can see visual change only after files are uploaded to server(there is no option for localhost development)

So files are compiled and instantly uploaded to server, currently to make it work I have to use

vue-cli-service build --watch --mode production

This way I get the correct code with css files created, but I would like to also have possibility to do
vue-cli-service build --watch , in development mode but still have css files created,

I think it can speed up the build a bit.

I am using vue.config.js for my configuration

Can you please help?

mosfetish · 2019-02-10T22:41:33Z

I agree. When running without the built-in serve, it should be possible to have a watch in dev mode that creates the same directory structure, else Vue CLI is too opinionated and means dispensing with the CLI altogether and creating a regular Webpack config.

smtxdev · 2019-02-11T08:14:23Z

@MarkiyanPyts @mosfetish

Can you confirm that the vue.config.js is not used when building with --watch? Because for me it seems like that. If that is the case then maybe it's a bug in the view-cli.

LinusBorg · 2019-02-11T08:38:05Z

It is using the config file.

The only thing that --watch changes, it this:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/index.js#L143-L147

...which only sets weback's watch option to true.

It doesn'T skip or change anything else.

smtxdev · 2019-02-11T10:03:39Z

@LinusBorg

This is my vue.config.js

module.exports = {
    filenameHashing: false,
    publicPath: './webroot/dist/',
    outputDir: './webroot/dist/',
    chainWebpack: config => {
        config.plugins.delete('html')
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
    }
}

When I build with --watch then it feels like vue.config.js is completely ignored. The files are not written to /webroot/dist/. If I use --watch --mode production everything works fine and my vue.config.js seems to be used.

mosfetish · 2019-02-11T20:34:56Z

@MarkiyanPyts

Can you confirm that the vue.config.js is not used when building with --watch? Because for me it seems like that. If that is the case then maybe it's a bug in the view-cli.

vue.config.js is being used. This is mine:

module.exports = {
    outputDir: './public/'
}

And in both --watch and non --watch modes the files are written to ./public (the default is ./dist)

My package.json script commands are:

    "dev": "vue-cli-service build --watch --mode development",
    "build": "vue-cli-service build --mode production"

The problem is that in --watch mode OR in --mode development, a different directory structure is created, as already noted.

--watch with --mode production creates the full directory structure, as desired, but production mode is not wanted during development.

ijunaid8989 · 2019-08-25T14:31:32Z

I am doing this

"dev": "vue-cli-service build --watch --mode development",

it only creates

  File                     Size                     Gzipped

  ../priv/static/app.js    18391.72 KiB             3172.99 KiB

  Images and other types of assets omitted.

 DONE  Build complete. Watching for changes...

why not any CSS files?

yyx990803 added feature request scope: cli-service build labels May 17, 2018

zigomir mentioned this issue May 19, 2018

feat(build): add 'watch' option #1332

Merged

yyx990803 closed this as completed in #1332 May 21, 2018

emanuelmutschlechner mentioned this issue Oct 23, 2018

How can I use --watch with this setup? yyx990803/laravel-vue-cli-3#18

Open

kinow mentioned this issue Feb 26, 2019

Produce development version to work with cylc-jupyterhub cylc/cylc-ui#36

Closed

smtxdev mentioned this issue Mar 11, 2019

´vue-cli-service build´ and ´vue-cli-service build --watch´ generate a different dist directory structure #3613

Closed

This was referenced Nov 1, 2020

build --watch mode vitejs/vite#995

Closed

Better SSR support [watch build] vitejs/vite#972

Closed

This was referenced Feb 2, 2021

Development WATCH (build to dist on changes) without local server or hot reloading. nuxt/nuxt#7296

Closed

Build --watch mode nuxt/nuxt#8754

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a watch mode #1317

Add a watch mode #1317

zigomir commented May 17, 2018

yyx990803 commented May 18, 2018

gtso86 commented Jun 1, 2018

yyx990803 commented Jun 1, 2018

zigomir commented Jun 1, 2018 •

edited

Loading

akhansari commented Aug 18, 2018

yyx990803 commented Aug 18, 2018

akhansari commented Aug 18, 2018

meteorlxy commented Sep 12, 2018 •

edited

Loading

anthonylebrun commented Sep 13, 2018

anthonylebrun commented Sep 13, 2018

zigomir commented Sep 14, 2018

meteorlxy commented Sep 14, 2018

meteorlxy commented Sep 14, 2018

krisimmig commented Oct 16, 2018 •

edited

Loading

cappe commented Oct 23, 2018 •

edited

Loading

jomofrodo commented Jan 3, 2019 •

edited

Loading

MasterB commented Jan 8, 2019 •

edited

Loading

NateWr commented Jan 11, 2019 •

edited

Loading

TatzyXY commented Jan 27, 2019

MarkiyanPyts commented Feb 3, 2019 •

edited

Loading

mosfetish commented Feb 10, 2019

smtxdev commented Feb 11, 2019

LinusBorg commented Feb 11, 2019 •

edited

Loading

smtxdev commented Feb 11, 2019

mosfetish commented Feb 11, 2019 •

edited

Loading

ijunaid8989 commented Aug 25, 2019

Add a watch mode #1317

Add a watch mode #1317

Comments

zigomir commented May 17, 2018

What problem does this feature solve?

Requirements

What does the proposed API look like?

yyx990803 commented May 18, 2018

gtso86 commented Jun 1, 2018

yyx990803 commented Jun 1, 2018

zigomir commented Jun 1, 2018 • edited Loading

akhansari commented Aug 18, 2018

yyx990803 commented Aug 18, 2018

akhansari commented Aug 18, 2018

meteorlxy commented Sep 12, 2018 • edited Loading

anthonylebrun commented Sep 13, 2018

anthonylebrun commented Sep 13, 2018

zigomir commented Sep 14, 2018

meteorlxy commented Sep 14, 2018

meteorlxy commented Sep 14, 2018

krisimmig commented Oct 16, 2018 • edited Loading

cappe commented Oct 23, 2018 • edited Loading

jomofrodo commented Jan 3, 2019 • edited Loading

MasterB commented Jan 8, 2019 • edited Loading

NateWr commented Jan 11, 2019 • edited Loading

TatzyXY commented Jan 27, 2019

MarkiyanPyts commented Feb 3, 2019 • edited Loading

mosfetish commented Feb 10, 2019

smtxdev commented Feb 11, 2019

LinusBorg commented Feb 11, 2019 • edited Loading

smtxdev commented Feb 11, 2019

mosfetish commented Feb 11, 2019 • edited Loading

ijunaid8989 commented Aug 25, 2019

zigomir commented Jun 1, 2018 •

edited

Loading

meteorlxy commented Sep 12, 2018 •

edited

Loading

krisimmig commented Oct 16, 2018 •

edited

Loading

cappe commented Oct 23, 2018 •

edited

Loading

jomofrodo commented Jan 3, 2019 •

edited

Loading

MasterB commented Jan 8, 2019 •

edited

Loading

NateWr commented Jan 11, 2019 •

edited

Loading

MarkiyanPyts commented Feb 3, 2019 •

edited

Loading

LinusBorg commented Feb 11, 2019 •

edited

Loading

mosfetish commented Feb 11, 2019 •

edited

Loading