vue数据绑定插值与后端模板语言插值冲突

摘要

使用后端直出页面的方式访问页面，后端模板是nunjucks，前端使用vue，刚好nunjucks，vue的文本插值方式都是Mustache语法（双大括号），导致了vue中绑定的插值变量失效，因为使用后端渲染，nunjucks的优先级比vue要高，所以执行插值解析的时候，nunjucks中并没有配置对应变量的值，故前端页面中渲染出来是空的。

解决方案

vue的官方文档中有说明可以使用分隔符（delimiters）属性改变插值的风格，传送门 https://cn.vuejs.org/v2/api/#delimiters，该属性的作用是：改变纯文本插入分隔符（即可以自定义插值风格语法，vue默认使用{{}}双大括号，你也可以使用{}$等等来替代）

注意：delimiters这个选项只在完整构建版本中的浏览器内编译时可用。

示例：

new Vue({
  delimiters: ['${', '}'],
  data() {
    return {
      test: "世界那么大"
    }
  }
})
// 结果展示
世界那么大

修改完成，后端渲染，页面直出，解决插值的冲突问题