How to fix "Error: Unknown option: devServer" in Vue 3

Question

我试图将 devServer 配置添加到 babel.config.js 文件（Vue 3 项目）中，但出现此错误。即使我从official site复制原始代码，它仍然报这个错误。

错误：

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.

如何修复此错误“未知选项：.devServer”

Answer 1

在 Vue CLI 项目中，您的 Webpack 配置位于项目根目录中的 vue.config.js，而不是 babel.config.js.如果该文件不存在，您应该创建它并将您的 devServer 配置放入其中。

来自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（不是babel.config.js）

module.exports = {
  devServer: {
    // Your configuration goes here
  }
}

How to fix "Error: Unknown option: devServer" in Vue 3

How to fix "Error: Unknown option: devServer" in Vue 3

webpack

vue.js

webpack-dev-server

vue-cli

vuejs3