TypeError: Cannot read property ‘upgrade‘ of undefined

在vue项目中，我配置了环境变量 .env.dev，同时配置了proxy
此时我的package.json中的serve 脚本命令为

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

此时运行 npm run dev 正常

但运行 npm run serve 报错

10% building 2/2 modules 0 active ERROR  TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined
    at Server.<anonymous> (/Users/chengjiahui/tengquan/working-space/node_modules/webpack-dev-server/lib/Server.js:135:47)
    at Array.forEach (<anonymous>)
    at new Server (/Users/chengjiahui/tengquan/working-space/node_modules/webpack-dev-server/lib/Server.js:134:27)
    at serve (/Users/chengjiahui/tengquan/working-space/node_modules/@vue/cli-service/lib/commands/serve.js:172:20)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

最新的webpack-dev-serve 检测 未定义代理属性时发出警告

也就是说此时你的vue.config.js 文件中的 devServer.proxy.target 为undefined

解决方案 就是设置devServer.proxy.target，因为我使用的是环境变量 process.env.VUE_APP_BASE_API 的值
当我打印出来 确实是undefined，如果你写死成 ‘http://192.xxx.x.xx’ 也是不会出现这个问题的

应该是 执行 npm run serve 时 并不会默认读取 .env.dev 文件中 VUE_APP_BASE_API 的值，所以才显示为 undefined

当然正常配置了 .env.dev 文件，并执行 npm run dev 是不会出现问题的 我只是无聊 试了下 npm run serve 发现了这个问题

参考地址：https://github.com/webpack/webpack-dev-server/pull/3647
https://stackoverflow.com/questions/55348996/cannot-read-property-upgrade-of-undefined-when-starting-vue-application