In Pursuit of Vue Config

#vue #vuecli

At some point in our dev life we might have come across situations where we had to create builds for different environments and deploy them. Luckily, I had such an opportunity as well. In my case, it was a Vue web app. When I first got this task, I was like how difficult could it be?, and the answer was you have to go through many GitHub issues.

In this post, I will be explaining the basics of Vue config. Many of you might already be familiar with this but I felt a need for writing down my findings because the moment I was given this task I wanted a post which would at least give me a fair idea about this topic.

I hope you all are familiar with Vue CLI, that was my starting point. Given below is a very basic version of a vue.config.js:

Let's go through this piece by piece:

productionSourceMap

You might have got an idea from the name itself. Yes, it's the property which if true will allow the source maps to be generated for production builds. Generating source maps also increases the build time for your app.

configureWebpack

The vue-cli uses webpack internally to build the app. It has a predefined config of webpack so that you don't have to configure from scratch. But still, there is always something different to be done according to your application. In such cases, you can add the configuration you want to change inside this property. Obviously the value should be an object or a function in which you will get the existing webpack config as an argument so that you can modify it and return nothing.
In my case, I wanted the build for 3 environments - development, staging and production, in which staging and production needed to be built in production mode.

I will come to this later as I have some basic things to explain before we go into all that.

So the vue-cli-service build command is used to get the build of our app. This command has only two modes of build either it builds in development or in production. By production and development build here I mean is, it will use the .env.production variables and .env (or .env.development if present) variables to build the app respectively.

The vue-cli-service build command takes in an option --mode which if not present is determined based on the value of NODE_ENV.
Hence, if you want to deploy your app somewhere no matter what the environment is you need to give NODE_ENV=production and to determine which environment variables to use just specify the --mode option like this (for staging):
NODE_ENV=production vue-cli-service build --mode staging

Now coming back to the configureWebpack value I have used. The mode property does the same as the NODE_ENV does, it determines the build mode of the app. I needed the development build for the dev environment, so that I can debug the code and have HMR support as well for faster rebuilds by giving:

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

which gave me a minified and debuggable build with HMR. All I had to do was add:

mode: process.env.VUE_APP_MODE !== "development" ? "production" : "development"

Create a VUE_APP_MODE entry in all the .env.{development|staging|production} files with respective environment name.

Finally the last one in the config file.

css

With this prop, you can define various settings to be applied on the CSS of your Vue components in the app during the build.
One such property is extract which when true will extract out all the CSS from the components to a separate CSS file. Its value is by default true for production and false for development. Also vue-cli uses mini-css-extract-plugin to extract the css so you could also pass the options as the value of extract prop here if you want to for e.g have some specific prefixes in your css files.

This post just scratches the surface of vue-cli config. I will keep on writing about it as I keep on exploring new things within the Vue-cli config. I sincerely hope that this post was helpful to you in some or the other way. Please let me know if I have missed something major or have made some mistakes (which is highly probable 😅).