Did you know you can actually configure the Vue CLI?

Although not immediately apparent, the Vue CLI does have its own configuration file.

The configuration changes the way the build and serve commands work.

Name & location

The file, named vue.config.js, is not created by default and should be added to the root folder of your project.

Structure

The general structure is of a regular JS Module:

module.exports = {
 /* configuration goes in here */
}

Some interesting options

So... What are the options?

Well, there are many options, there's a very long list of them in the official guide

I've listed some of the more interesting ones below.

assetsDir

Where the static assets are placed relative to the output folder, default is ''

pages

Build the app in multi-page mode (mainly for creating a browser extension project)

lintOnSave

Use this to disable the lint on save or to produce just warnings instead of failing the compilation. Only relevant when eslint plugin is used. Default is true

configureWebpack

Specify a configuration option for webpack, can be object or a function.

css.extract

Whether to extract the css of the components into separate files. Defaults to true on production and false on development.

css.loaderOptions

Pass options to one of the configured css loaders.

devServer.proxy

Specify the URL for a development API server, this will send any unknown requests to the specified URL.

pwa

Pass options to the progressive web app plugin.

pluginOptions

Pass options to any other 3rd party plugin.

Code with love,
Lilo