#发现问题
首先,项目的代码是在本地开发,部署是自动化的。所以该问题在本地开发过程并不能发现
当项目打包部署到容器上时,浏览器访问出现以下控制台异常
异常 浏览器截图
能够看到,这个错误一定是前端出现的异常,各种网站查找问题也都说是漏了符号?但事实并不是那么简单。
因为本地运行没有问题,一定是打包后出现的。
排查打包问题前,还发生了个小插曲。
中途插曲
查看了index.html 发现css引用竟然用了script标签?虽然不知道为什么打包后会用script引用了css,但那是不是只要把他删了就可以了?
然而我想的太简单了,删除后的确没有报错了,但页面依旧一片空白。。。看来必须找出问题的根源。
后来阴差要错的,想着要不本地打包试试,结果打包异常了。。。
构建时报错
也是无语,最终定位到问题代码。
问题代码
原来vue支持使用双斜杠定义正则表达是,但原生代码不支持呀!稍微改动一下,
解决代码
使用new RegExp()
定义正则表达式,然后,打包正常、部署正常。。。
总结:这次的异常是因为使用了自动化部署工具,全程没有看到打包过程,导致并不能及时发现打包后和开发环境的不兼容问题。另外,意识到是打包出现的问题,为什么不及时看看打包过程日志?而是浪费了过多的时间查找问题。。。