外部 js 文件偶尔会加载失败

最近有一个很奇怪的问题一直困扰着我:
html 页面中,head部分引入了几个外部js文件。

比如:

<html>
    <head> 
        <script src="/assets/js/axios.min.js"></script>
        <script src="/assets/js/vue.min.js"></script>
    </head>
    <body>
        <div id="mDiv">
        </div>
        <script>
            // 目前页面结构就是这样,其他的代码都和此异常无关,就不多贴了。
            // 这里就直接报错,显示 Vue 未定义
            var vm = new Vue({
                el: "#mDiv"
            });
        </script>
    </body>
</html>

项目大致结构就是这样。
看起来没什么问题呀,
但是偶尔会出现一种非常奇怪的问题:

异常示例

看起来是页面渲染异常导致 vue 或者 axios 的 appendChild 产生了异常,以至于 vue 未定义。

另一个页面里,我有用到 jQuery,也会偶尔出现这种问题,提示 appendChild 异常,然后紧接着会提示 $ 未定义。

这种问题大概你长时间未打开该页面,第二天或者更久时间后,你首次打开该页面就会出现这个问题,此时,只要刷新一下页面即可恢复正常。

听起来有点像页面某天首次打开时,被运营商注入了,然后页面就出问题了。

希望各位大佬解答。


190817更

到axios源码中,搜了一下,根本没有 appendChild 代码。直觉告诉我,页面被注入了。

阅读 4.9k
2 个回答

可能跟绝对路径有关,试试脚本相对地址,或者直接将脚本放在与html同级目录测试下。

推荐问题
宣传栏