Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >npm run dev启动报错:TypeError: Cannot read property 'upgrade' of undefined

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

作者头像
王小婷
发布于 2021-11-24 05:55:03
发布于 2021-11-24 05:55:03
8.4K00
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

图片.png

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
PS C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master> npm run dev 

> eladmin-web@2.6.0 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.<anonymous> (C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master\node_modules\_webpack-dev-server@3.11.2@webpack-dev-server\lib\Server.js:135:47)
    at Array.forEach (<anonymous>)
    at new Server (C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master\node_modules\_webpack-dev-server@3.11.2@webpack-dev-server\lib\Server.js:134:27)
    at serve (C:\Users\wangting\Desktop\eladmin-web-master\eladmin-web-master\node_modules\_@vue_cli-service@3.5.3@@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! eladmin-web@2.6.0 dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the eladmin-web@2.6.0 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文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  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路径需要和以上的代理路径保持一致,千万不要拼错了哦。

再次启动即可

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/8/4 下午,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue-cli3.x 新特性及踩坑记
vue-cli 都到 3.0.3 了,所以是时候玩转一下 vue-cli 3 的新特性了。
夜尽天明
2019/11/13
8660
vue-cli3.x 新特性及踩坑记
vue.config.js打包优化(有效)「建议收藏」
//百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻
全栈程序员站长
2022/07/01
1.9K0
vue.config.js打包优化(有效)「建议收藏」
记一次webpack构建提速
由于业务调整需要,最近接手了公司内部云平台的项目H。看了代码,开发了几个需求,我的第一感觉是,H项目真的是严肃又有历史感!因为它经过了好多位前端同学多年的开发与维护,“前任”小伙伴们在里面花费了大量的时间与精力。这里面涉及到的技术栈也错综复杂,包含了react、webpack、reflux、mobx以及不少手动封装的类库和组件,日积月累,已经包含了十几个子项目,代码体积可见一斑。
前端迷
2020/01/02
8360
npm run dev启动报错:Error: Cannot find module 'semver'
PS C:\Users\wangting\Desktop\Wisdom_admin\wisdom_admin> npm run dev > eladmin-web@2.6.0 dev C:\Users\wangting\Desktop\Wisdom_admin\wisdom_admin > vue-cli-service serve internal/modules/cjs/loader.js:985 throw err; ^ Error: Cannot find module 'semver
王小婷
2021/11/24
4K0
npm run dev启动报错:Error: Cannot find module 'semver'
Vue:npm run serve 到底做了什么?
在 vue-cli2或者 vue-cli3 中,当我们创建好一个项目,我们要通过 npm run dev(vue-cli2的命令,vue-cli3之后用npm run serve,原理都一样,只不过是换了一下名字而已)运行一个项目。或者通过 npm run build 打包一个项目。那么问题来了,当我们在命令框中输入这两个命令的时候:
用户9078190
2022/10/25
3K0
Vue:npm run serve 到底做了什么?
记录一些报错记录
在我的 ./src/icons/index.js 文件中,我试图从 ‘@/components/SvgIcon’ 导入一些内容,但是Webpack没能在我给出的路径找到该模块。
HelloWorldZ
2024/03/20
2690
记录一些报错记录
vue运行报错:SyntaxError: Cannot use import statement outside a module
PS C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin> npm run dev > vue-element-admin@4.2.1 dev C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin > vue-cli-service serve INFO Starting development server... 10% building 2/2 modules
王小婷
2020/12/31
3.2K0
vue3+ts+element-plus 后端管理系统系列一(简介)
vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写。
星宇大前端
2021/02/02
10.3K1
vue-cli3项目搭建配置以及性能优化
在之前的开发中主要用的是vue-cli2,最近空闲时间比较多,接下来有新项目,本着偷懒的本能,自己打算搭建一个基础包以备后期开发应用,并对其进行性能优化和配置
青梅煮码
2023/03/13
1.7K0
vue-cli3项目搭建配置以及性能优化
vue3+element-plus+router+vuex+axios从零开始搭建(2)
vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化,这也带来了许多问题,很多配置需要自己配置,
solate
2021/06/21
1.5K0
Vue+tp6 php框架如何快速建立一个前后端分离项目
作者主要是写后端的,所以本文主要以后端的角度,讲如何使用Vue+Tp框架结合,快速打通一个前后端分离的项目部署,可以作为后端学习Vue的入门步骤,通过此教程,你可以学到在生产环境和本地环境中,vue+tp 等框架是如何结合以及部署的。
PHP开发工程师
2021/04/26
4.8K0
Vue+tp6 php框架如何快速建立一个前后端分离项目
vue-cli-service: command not found报错引发的血案
最近因为工作需要,开始学习vue,于是在github上找了一个star数比较高的项目 ant-design-vue-pro 准备练手。项目克隆下来后,用 vscode 打开工程,并且使用了 vscode 自带的终端安装了依赖包,但是准备执行 yarn serve 启动工程的时候却意外的抛出了一个错误:
astonishqft
2022/12/05
3K0
uni-app的多环境部署配置
记录下如何对uni-app项目进行多环境打包部署改造 # 环境区分 官方文档说明: 开发环境和生产环境 uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。 在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境 # 解决方案 使用基于vue-cli命令行方式创建项目 添加必要的环境变量, VUE_APP_ 起始,例如 VUE_APP_BASE_API 即在
薛定喵君
2021/05/18
3.8K0
【架构师(第三十五篇)】 业务组件库开发之使用 Rollup 进行打包
Rollup 设计之初就是面向 ES Module 的,构建出结构扁平,性能出众的类库。
一尾流莺
2022/12/10
1K0
Webpack5 实践 - 构建效率倍速提升!
对于前端构建工具 Webpack、babel、eslint 等的每一次升级,就像刚刚经历一场地震似得,最不想面对的就是处理各种 API 的不兼容性,有时还会出现一些奇奇怪怪的问题,为什么还要升呢?并不是为了给自己找事,还是要讲究投入产出比的,也就是最终的收益是要大于产出比的。
五月君
2021/07/15
3K0
Webpack5 实践 - 构建效率倍速提升!
【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量
vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
江一铭
2022/06/17
19.8K0
【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量
一步一步创建vue2.0项目(一)
新建一个文件夹 vue2.0-learn 。_前提是默认已经安装了nodejs和npm_
frontoldman
2019/09/02
6700
Vue学习笔记
Npm依赖于Node.js,直接下载安装,并配置环境变量 由于个人比较习惯使用 shift+右键 唤起powershell来执行命令,默认powershell不允许执行脚本文件,需要解除此安全策略
WindRunnerMax
2022/05/06
1.2K0
Vue学习笔记
mac下使用vue create 项目名称 创建项目后无法运行ERROR  Error: Cannot find module 'vue-template-compiler/package.json'
promote:vue_pro wangxinqiang$ npm run serve
botkenni
2019/09/03
6.1K0
mac下使用vue create 项目名称 创建项目后无法运行ERROR  Error: Cannot find module 'vue-template-compiler/package.json'
vue.config.js 配置文件
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
用户7043603
2022/02/23
3K0
推荐阅读
相关推荐
vue-cli3.x 新特性及踩坑记
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验