Vue 重启电脑后项目报错 Uncaught ReferenceError: xx is not defined
问题
昨天上班还运行得好好的,今天启动就报错了,无法进入系统。
环境描述
vue2+webpack,比较旧的框架。还引入了外部的以Cesium为基础封装的三维引擎。
入口除了main.js的app,还定义了现在遇到报错的xx变量。
尝试
- 删除node_modules和package-lock.json,重新npm install,无效;
- 再次重启电脑,无效;
- 清除浏览器缓存,清除cookies,无效;
- 找报错代码,可能是加载的js方法使用了全局变量GV,但此时GV还未定义。想不明白为何昨天还正常今天就报错,我只是重启了电脑;
- 参考这篇文章js里出现Uncaught ReferenceError: XXX is not defined的错误的解决方法,全局搜window.onload(),没有,无效;
- 卸载node和npm重新安装,无效;
- 另起一个目录把代码迁过去就不报错了,暂时没精力探究到底是为什么。
12月5日更新
换主机,这回另起目录也不管用了。无语至极……
临时解决
请大神帮忙,他说可能是node版本之类的影响了加载顺序(虽然降低版本到10.x还是不行),最后在index.html里手动加上了定义这个变量的地址,就可以启动了。
在head标签中,添加:<script type="text/javascript" src="/xx.js"></script>
如果有人也遇到了类似的问题,希望我的遭遇可以提供一些灵感。
打包也同样报错
实际是index.html中js文件加载顺序问题。根本原因懒得探究了,发现这个问题后查看了打包后的index.html,开发时可以解决问题的不再生效,因为原本的js都已经被编译了。
编译后的文件路径是 ./static/js/xx.d4d904e373afe3fd59b1.js,而且在app编译出的文件下面。手动把两个文件的引用换了位置,就不再报错。
但是为避免每次打包都多这么一个步骤,检索了一下对应的解决方法,就是在webpack.prod.conf.js中配置打包顺序:
// chunksSortMode: 'dependency' <-- 原本代码的打包顺序配置
chunksSortMode: function (chunk1, chunk2) {
var order = ['manifest', 'vendor', 'xx', 'app']; // 在此处进行配置文件顺序
var order1 = order.indexOf(chunk1.names[0]);
var order2 = order.indexOf(chunk2.names[0]);
return order1 - order2;
}
参考文章:vue文件打包顺序