Building features on demand

[Aferz]

What problem does this feature solve?

Build the application based on a set of a features instead of the current building environment.

I'm facing with a problem in the new @vue/cli. I want to create a staging environment for my company/application but I don't find a nice way to do it without override lots of line of default webpack configuration file.

If I explicitly set the build mode (--mode staging), vue cli in fact gets the .env.staging environment variables BUT it builds the bundle with development features (for example, it doesn't minify the code, it doesn't extract the CSS, etc ...)

Futhermore, if I build the bundle using this command, as the documentation recommends vue-cli-service build --mode development, it just not work without being served by internal vue dev-server. The static assets like images or icons are not being extracted out the bundle (I suppose this is intended behaviour) but my app.js is requesting images via HTTP that doesn't exists in my distfolder.

What does the proposed API look like?

My proposal would be a way to abstract the core features available in @vue/cli to build against a set of required features instead of basing the build in the variable process.env.NODE_ENV

Of course, this behaviour can fallback in a pre-defined set of features by NODE_ENV if this list is not defined.

One example, vue.config.js:

...

webpackFeatures () {
    const features = [
      'pwa',
      'dll',
      'css-extract',
    ];
    
    if (process.env.NODE_ENV === 'production') {
      features.push('minification')
      features.push('css-purge')
    }
    
    return features
  }

...

If this becomes in something, in a future this could be a good approach to create plugins with features that encapsulate any webpack behaviour under a good readable name.

Of course, this is just a draft and the behaviour/api could change to adapt to the current code or whatever. I'm sure that I'm forgetting/not getting something into account, but I hope my idea is a bit more understandable.

Cheers.

[LinusBorg]

If I explicitly set the build mode (--mode staging), vue cli in fact gets the .env.staging environment variables BUT it builds the bundle with development features (for example, it doesn't minify the code, it doesn't extract the CSS, etc ...)

NODE_ENV=production vue-cli-service build --mode staging

...or set the NODE_ENV accordingly in the env file

Doesn't that do what you want it to?

Futhermore, if I build the bundle using this command, as the documentation recommends vue-cli-service build --mode development, it just not work without being served by internal vue dev-server. The static assets like images or icons are not being extracted out the bundle (I suppose this is intended behaviour) but my app.js is requesting images via HTTP that doesn't exists in my distfolder.

I don't really understand this part.

[Aferz]

NODE_ENV=production vue-cli-service build --mode staging

Ok, this work as I expected, but you have to admit this is a bit confusing. Having to set the environment to production and declaring --mode staging is seems confusing to me. But maybe it's just me.

I don't really understand this part.

If I bundle my application with --mode development and then serve the result with apache/nginx, the server requests all the images via HTTP, but the build process didn't output any /img folder in the dist directory (Because I guess the images size was lower than expected by the file-loader).

Screenshots for ./node_modules/.bin/vue-cli-service build --mode=development:

Build Process

Dist folder content

Basic server loading the index.html

---

Anyways, it seems that with your first comment I can solve the problem of the bundle creation with the same production "features" but using other environment variables.

I'm not closing this issue because I'd like to know if the proposed feature could be a good improvement to the build process. If that is not the case, feel free to close it or just tell me to do it.

Thanks @LinusBorg

[yyx990803]

You are supposed to add

NODE_ENV=production

Into your .env.staging. As the doc explains:

• mode !== env.
• Only NODE_ENV=production will result in a production oriented build, regardless of mode.
• Only production mode defaults to NODE_ENV=production. In any other mode, you need to explicitly set NODE_ENV to your desired value.

[Aferz]

All clear @yyx990803 !

[phcoliveira]

I am using [email protected], and I have been trying to get the build service to read a file named .env.staging. Can't get it to work, though.

I have tried using:

• npm run build --mode staging
• npm run build NODE_ENV=production --mode staging
• NODE_ENV=production npm run build --mode staging

I wonder what am I missing.

[phcoliveira]

If somebody else is having the same problem I did, I got it working by adding another script in the package.json file, build-staging. Don't forget to set env variable NODE_ENV=production either in this new command or in the file .env.staging.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-staging": "vue-cli-service build --mode staging",
    "test": "vue-cli-service test --watch",
    "e2e": "vue-cli-service e2e",
    "lint": "vue-cli-service lint"
  }

[ghost]

@phcoliveira What command did you use to run your "build-staging"? I too tried many ways. Whatever I do, I see only either production or development ENV when running the index.html file in dist.

npm run build --mode staging is giving a production oriented build but loading the production variables

npm run build-staging is giving a dev oriented build but loading the staging variables