Unterminated string literal.Vetur(1002) ‘,‘ expected.Vetur(1005)

 问题背景

vue 项目Relation Graph 制作关系图， 结点（node）使用 html 片段 如下 （代码只截取一小部分）

  'nodes': [
            { id: 'a', html: 
            '<div style="border:#ff8c00  solid 1px;height:50px;width:120px;border-radius:5px;background-position: center center;">  <div style="height:30px;width:120px;background-color:rgba(225,117,114);color:white;font-size:20px">dfbdzb</div>  <div>fbdf</div> </div>', 
          },
      
             { 'id': 'b', 'text': '用户b',
             'html': 
              '<div style="border:#ff8c00  solid 1px;height:50px;width:120px;border-radius:5px;background-position: center center;"> 
               <div style="height:30px;width:120px;background-color:rgba(225,117,114);color:white;font-size:20px"></div> 
               <div></div>  
              </div>'},

 报错信息

终端报错

 显示有 三十多个问题

 

---

 多数产生以下报错信息

Unterminated string literal.Vetur(1002)

',' expected.Vetur(1005)

Declaration or statement expected.Vetur(1128) 

 解决

解决方法也很简单 ，就在 每一行的后面加上 转义字符   \  

 可以看到 每一行的末尾都加上了   \  ,错误就解决了 ，可能是之前没有检测的换行

 { 'id': 'b', 'text': '用户b',
             'html': 
              '<div style="border:#ff8c00  solid 1px;height:50px;width:120px;border-radius:5px;background-position: center center;"> \
               <div style="height:30px;width:120px;background-color:rgba(225,117,114);color:white;font-size:20px"></div> \
               <div></div>  \
              </div>'},