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文件打包顺序

posted @ 2022-11-24 10:23  宇宙野牛  阅读(672)  评论(0编辑  收藏  举报