vue报错总结

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

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

$ npm run dev

> [email protected] 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! [email protected] 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 [email protected] 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元素已经加载完毕。

猜你喜欢

转载自blog.csdn.net/marslover521/article/details/82782363