vue报错总结

最新推荐文章于 2025-06-02 12:59:48 发布

原创最新推荐文章于 2025-06-02 12:59:48 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文解决了Vue项目中npm run dev命令导致的端口冲突问题，以及在Vue中使用第三方canvas插件时出现的getContext属性读取错误。通过调整配置文件中的host值和确保canvas元素在文档加载完成后调用其方法，成功避免了这些错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue在开发环境中运行`npm run dev`时报错

前一天公司服务器挂掉，当天没有运行项目，第二天运行项目的时候出现以下报错：

$ npm run dev

> Pr_BD_CASE02_DV@1.0.0 dev C:\Users\user\Desktop\Pr_BD_CASE02_DV
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main                  10% building modules 1/1 modules 0 activeevents.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRNOTAVAIL 192.168.3.n:8080
    at Object._errnoException (util.js:992:11)
    at _exceptionWithHostPort (util.js:1014:20)
    at Server.setupListenHandle [as _listen2] (net.js:1338:19)
    at listenInCluster (net.js:1396:12)
    at doListen (net.js:1505:7)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Pr_BD_CASE02_DV@1.0.0 dev: `webpack-dev-server --inline --progress --co                 nfig build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Pr_BD_CASE02_DV@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional log                 ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2018-09-20T01_56_27_2                 01Z-debug.log

主要报错信息点在：

Error: listen EADDRNOTAVAIL 192.168.3.n:8080
    at Object._errnoException (util.js:992:11)
    at _exceptionWithHostPort (util.js:1014:20)

报错原因是端口号占用问题，因此在cmd中查看了本地IP地址：
打开cmd，输入ipconfig，查看本地IP地址：
在这里插入图片描述

然后再对比vue项目中config文件夹中index.js文件中的host后的IP值，发现IP值不一样了，因为我之前已经设置为本地IP值了，因此一开始并没有注意到这个问题。
在这里插入图片描述

因此将host后的IP值修改现在的IPv4后的值后，再次运行npm run dev就没有报错了。

PS：服务器重启后，IP地址有可能会改变。
如果服务器是绑定IP+MAC，手动分配IP，重启自然不会变化；
如果服务器是通过DHCP获取IP，重启后，也不一定会变化，服务器在重启过程中，网卡并没有被复位，网络仍然是保持畅通的，只是服务器的操作系统没在而已。当然，断电了，就一定会变的。

2.在vue中引入第三方canvas插件时容易出现以下报错

报错信息：Cannot read property ‘getContext’ of null
报错原因：canvas的getContext方法需要在页面文档加载完成之后才能去触发识别这个属性。
解决办法：canvas方法写在组件或插件中，window.onload = function（）{}中写canvas的方法，这样保证canvas的getContext方法调用的时候，canvas元素已经加载完毕。