前端系列十九：Vue项目中引入外部JS报错原因
第一步:在Vue中引入某个组件时，在Vue单页面找不到组件注册时，这个时候该考虑组件是否在Vue里的html页面里是否是用 <script></script>标签引入的第三方JS文件示例：<script src=http://xingcuan.com/he/we-sitemap/master/sitemap.0.1.js></script>第二步：引
第一步:
在Vue中引入某个组件时，在Vue单页面找不到组件注册时，这个时候该考虑组件是否在Vue里
的html页面里是否是用 <script></script>标签引入的第三方JS文件
示例：
<script src=http://xingcuan.com/he/we-sitemap/master/sitemap.0.1.js></script>
第二步：
引入功能正常后,可能浏览器控制台会报类似于：
sitemap.0.1.js:1 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at Object.<anonymous> (sitemap.0.1.js:1)
意思就是：
0.1.js:1未捕获的TypeError:无法读取null的属性（读取'addEventListener'）
第三步：
在<head>内引入外部Js ，报错出异常，显示Uncaught TypeError: Cannot read property
‘appendChild’ of undefined，属性未定义。为什么出现这种问题。查找很久发现这跟Js、DOM加载
顺序有关，由于写在了<head>内，它会先执行，但是此时由于DOM还未加载完，而Js里有需要获取DO
M中元素的语句要执行，这时就会出现异常，Js报错Uncaught TypeError: Cannot read property
‘appendChild’ of undefined，无法读取未定义的属性’appendChild’
第四步：
解决方法很简单，将Js的外部文件引入放在<body>中就行，让整个页面加载完后再
执行Js就不会出现无法读取的问题了。（如果是内部Js的话，还可以使用window.onload = function(){} 代码包裹，也是在文档加载之后
再执行）
第五步：
<head>内的Js可能会阻塞页面的传输和页面的渲染，也就是在<head>内的Js一般要先执行完后，才开始渲染body页面。所以尽量不要将 JS 文件放在 head 内。可以选择在 DOM完成时，
或者特定区块后引入和执行 JavaScript。
所以为了避免<head>内引入的Js会阻塞页面的传输和页面的渲染，一般原则是，样式在前面，DOM文档，脚本在最后面。遵循先解析再渲染再执行Javascript这个顺序。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)