Vue Cli 3.0 where is the config file?

56
votes

I've seen it mentioned in docs, etc the vue.config.js file. And also noted previously these are handled in the webpack config file, etc in 2.0. But I can't find either file in my project folder created with vue cli 3.0... Where is the config files and why isn't it anywhere in the top level folders, etc?

5
vue.jsvue-cli
What command did you use to create the vue cli project? For using webpack you need to use something like vue init webpack your-project – skribe
@skribe I've used vue create my-project as the old way of selecting webpack or others are no longer used in 3.0 – Kelvin Zhao

5 Answers

65
votes

Where is the config files and why isn't it anywhere in the top level folders, etc?

The initial project doesn't require the file to exist because you just created a project with fresh "default" settings that don't require any config.

Just create it yourself. it's even mentioned in the README:

Many aspects of a Vue CLI project can be configured by placing a vue.config.js file at the root of your project. The file may already exist depending on the features you selected when creating the project.

(emphasis mine)

Edit: now to be found here: https://cli.vuejs.org/config/#global-cli-config

12
votes

The file by default does not exists as it was mentioned by Linus. You need to create manually vue.config.js file in a root location of your project, i.e. on the same level where is package.json.

9
votes

There is no need for "config" directory anymore. if you want to define "environment variables" you can do that in ".env" file

Just like:

VUE_APP_TITLE=Test

You can also create ".env" file for each environment

Like:

.env.development for development mode

.env.production for production mode.

For more information please read: https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode

5
votes

vue.config.js is now an optional config file.

Refer: https://cli.vuejs.org/config/#vue-config-js

-1
votes

Check this out:

  1. Create

vue.config.js

in your vue project at the same level with

package.json

  1. Specify the host and the port:module.exports = { devServer: { host: "localhost", port: "8080" } }

  2. Run:

npm run serve

in your vue folder.

Check out this screenshot: Hope it helps!

PS: If you want to disable running the app on a local host check out this post: How do I disable running an app on the local network when using vue-cli?