vue之Error: Unknown option: .devServer.

背景

在使用内网穿透工具时，加入对应的配置，启动出现报错。

一、遇到的问题

报错：

 Error: Unknown option: .devServer. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
Error: Unknown option: .devServer. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
    at throwUnknownError (D:\code\vscode\lottery-front\node_modules\@babel\core\lib\config\validation\options.js:133:27)
    at D:\code\vscode\lottery-front\node_modules\@babel\core\lib\config\validation\options.js:118:5
    at Array.forEach (<anonymous>)
    at validateNested (D:\code\vscode\lottery-front\node_modules\@babel\core\lib\config\validation\options.js:94:21)
    at validate (D:\code\vscode\lottery-front\node_modules\@babel\core\lib\config\validation\options.js:85:10)
    at D:\code\vscode\lottery-front\node_modules\@babel\core\lib\config\config-chain.js:204:34
    at cachedFunction (D:\code\vscode\lottery-front\node_modules\@babel\core\lib\config\caching.js:60:27)
    at cachedFunction.next (<anonymous>)
    at evaluateSync (D:\code\vscode\lottery-front\node_modules\gensync\index.js:251:28)
    at sync (D:\code\vscode\lottery-front\node_modules\gensync\index.js:89:14)
1
2
3
4
5
6
7
8
9
10
11
12

原因：

vue.config.js 是一个可选的配置文件，如果它存在于项目根目录中（位于 package.json 旁边），则
@vue/cli-service 将自动加载该文件。您还可以使用 package.json 中的 vue
字段，但请注意，在这种情况下，您将只能使用与 JSON 兼容的值。

二、解决方法

在vue项目根目录创建：
vue.config.js 而不是在 babel.config.js中

module.exports = {
  devServer: {
    // Your configuration goes here
  }
}
1
2
3
4
5

附件

参考：how-to-fix-error-unknown-option-devserver-in-vue-3