Vue使用中一些异常收集以及解决方法

常见异常

• Uncaught SyntaxError: Unexpected token <
  • 此异常通常是由于加载静态资源失败引起的，或者页面上的js错误，比如function未定义等导致错误提示指向第一行。
  • 也就是说解析当前内容的时候，内容解析失败，所以一般都指向第一行，而html文档开头一般都是<
  • 示例
    • 基于vue的一个项目，添加某个js引用，由于找不到该js，返回了当前页面的html内容，解析的时候html文本就被当成js来解析，所以第一行就报错了

诡异的异常

Cannot assign to read only property ‘exports’ of object

• 常见的情况是import和module.exports混用，改成export default就好。
• 另一种奇葩的情况是，没有用import，用module.exports也会报这个错，经排查发现是使用了typeof，让人郁闷。也只能将module.exports改成export。

let obj = {}
let isObj = true//typeof obj === 'object'
if (isObj) {
    obj.test = 23333
}
module.exports = obj

改成

let obj = {}
let isObj = typeof obj === 'object'
if (isObj) {
    obj.test = 23333
}
export default obj

循环引入模块

描述

• 问题发生在引入模块的时候，由于循环引入模块导致最先引入的模块返回空值。main.js入口引入router，router引入Layout.vue，关键在于Layout.vue又引入了router，从router中读取路由数据显示菜单。

分析

• 模块引入的时候，会先把该模块的依赖引入一次，缓存起来，其它地方第二次引入就直接返回。
• main.js第一次引入router，在这之前会先引入router的依赖模块Layout.vue（此时还没引入router），而Layout.vue又依赖于router。所以需要先引入router，注意这个时候才是第一次引入router。这个时候就相当于进入死循环了，但是Webpack处理了这个问题。Layout.vue引入的router返回了空值，这样就完成了Layout.vue的引入，再完成router的引入，这个时候main.js里面引入的router就是正常的，而Layout.vue引入的router则是空值。因此，router明明有值菜单却不显示。

解决

1. 避免循环引入模块，不要在让Layout.vue直接或间接依赖router，因为router肯定依赖Layout.vue作为模板。
2. router中延迟加载Layout.vue，不马上引入Layout.vue，也可避免循环引入。

案例

• 还原此次提交即可重现 https://github.com/xxred/Easy.Front-End/commit/bf6d5741e38225b28af1e6a464681466d6885cfe
• 解决方法在本次提交 https://github.com/xxred/Easy.Front-End/commit/f9c7fb37c08d08db3553f3562814ac97e52822a2

总结

• 只要不是所用框架出现重大问题，在使用上出现的问题都可以通过逐步排查发现并解决，需要有耐心，逐项测试，不断抽出可能出现的代码，独立测试，避免盲目无方向。