npm run dev启动报错：TypeError: Cannot read property 'upgrade' of undefined

图片.png

PS C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master> npm run dev 

> [email protected] dev C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master
> vue-cli-service serve

 INFO  Starting development server...
 10% building 2/2 modules 0 active ERROR  TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined
    at Server. (C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master\node_modules\[email protected]@webpack-dev-server\lib\Server.js:135:47)
    at Array.forEach ()
    at new Server (C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master\node_modules\[email protected]@webpack-dev-server\lib\Server.js:134:27)
    at serve (C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master\node_modules\_@[email protected]@@vue\cli-service\lib\commands\serve.js:137:20)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\wangting\AppData\Roaming\npm-cache\_logs\2021-08-03T08_25_42_384Z-debug.log

问题：

描述： 给vue项目增加了本地代理，也就是给vue.config.js增加了devServer之后，启动项目报错：Vue ERROR TypeError: Cannot read property ‘upgrade’ of undefined

这个错误实际上时因为代理地址为空导致的，检查后发现proxy属性中的target的值为空，没有填入，填入后解决错误！

解决：

打开vue.config.js文件：

  proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/check': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/check': 'check'
        }
      }
    }

在查看一下
.env.development文件（开发环境）
和
.env.production文件（生产环境）

关于几个环境百度解释如下：

开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。

测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。

生产环境：是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。

三个环境也可以说是系统开发的三个阶段：开发->测试->上线，其中生产环境也就是通常说的真实环境。

通俗一点就是：

1：开发环境：项目尚且在编码阶段，我们的代码一般在开发环境中 不会在生产环境中，生产环境组成：操作系统 ，web服务器 ，语言环境。 php 。 数据库 。 等等

2：测试环境：项目完成测试，修改bug阶段

3：生产环境：项目数据前端后台已经跑通，部署在阿里云上之后，有客户使用，访问，就是网站正式运行了

不管是在开发环境
还是在生产环境里面
代理路径需要统一一下

VUE_APP_BASE_API路径需要和以上的代理路径保持一致，千万不要拼错了哦。

再次启动即可