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
Top comments (3)
Hey, I added vue.config.js in project root directory, but I have some error when I serve project.
Invalid options in vue.config.js: "runtimerCompiler" is not allowed
Is there another solution? I just need to get template dom from Buefy fullscreen modal.
hey, in vue-cli now the "runtimerCompiler" has been updated to runtimeCompiler
It's been a few months since you commented this... any luck?