I tried to add a devServer configuration into the babel.config.js file (Vue 3 project) and I get this error. Even when I copy the original code from the official site, it still reports this error.
The error:
Error: Unknown option: .devServer. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
at throwUnknownError (/Users/aman/Desktop/Vue/vue01/node_modules/@babel/core/lib/config/validation/options.js:124:27)
at /Users/aman/Desktop/Vue/vue01/node_modules/@babel/core/lib/config/validation/options.js:109:5
at Array.forEach (<anonymous>)
at validateNested (/Users/aman/Desktop/Vue/vue01/node_modules/@babel/core/lib/config/validation/options.js:85:21)
at validate (/Users/aman/Desktop/Vue/vue01/node_modules/@babel/core/lib/config/validation/options.js:76:10)
at /Users/aman/Desktop/Vue/vue01/node_modules/@babel/core/lib/config/config-chain.js:200:34
at cachedFunction (/Users/aman/Desktop/Vue/vue01/node_modules/@babel/core/lib/config/caching.js:62:27)
at cachedFunction.next (<anonymous>)
at evaluateSync (/Users/aman/Desktop/Vue/vue01/node_modules/gensync/index.js:251:28)
at sync (/Users/aman/Desktop/Vue/vue01/node_modules/gensync/index.js:89:14)error Command failed with exit code 1.
How can I fix this error "Unknown option: .devServer"
In a Vue CLI project, your Webpack configuration goes in vue.config.js in your project root, not babel.config.js. If that file doesn't exist, you should create it and put your devServer configuration in it.
From the docs:
vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json). You can also use the vue field in package.json, but do note in that case you will be limited to JSON-compatible values only.
vue.config.js (Not babel.config.js)
module.exports = {
devServer: {
// Your configuration goes here
}
}