在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