Twig模板引擎与Vue.js冲突导致显示空白的解决方法

当在以twig为模板引擎的网站管理系统中使用Vue时，会出现冲突导致显示空白，Vue.js无法正常使用，主要原因是由于两者的语法上有导致误解析的相同分隔符——{{}}。

vue

受影响的系统包括：October (CMS)、Drupal8、Grav (CMS)等以twig为模板引擎的网站管理系统

例如下面的模板片断：

 

 Label Value: {{ foo }}

 Field Value: 
 
 

解决办法一如下

Vue支持修改分隔符，修改默认的Vue分隔符即可，语法如下：

Vue.config.delimiters = ['${', '}$'];

把上面这句插到初始化Vue的代码之前，修改之后就可以在模板中使用这种方式来执行Vue代码了：

 
 

 Label Value: ${ foo }$

 Field Value: 
 
 
 

完工，当然，你也可以用类似Vue.config.delimiters = ['<%', '%>']这种分隔符来表示。

解决方法二：

这次我们从October cms下手，October支持“不解析”标签，在不解析标签里面的内容会作为文本对待而不做任何解析，语法如下：

 {% verbatim %}
 {{ foo }}
 {% endverbatim %}
 

例如：

 {% verbatim %}
 
Hello {{ name }}, this is parsed by AngularJS
 {% endverbatim %}
 

附：

引用一：http://vuejs.org/api/#delimiters
引用二：http://octobercms.com/docs/markup/tag-verbatim

Tag：Drupal8, GravCms, OctoberCms, twig, Vue
发布时间：2015年08月09日
博客被黑，挪窝安家……