摘要
使用后端直出頁面的方式訪問頁面，后端模板是nunjucks，前端使用vue，剛好nunjucks，vue的文本插值方式都是Mustache語法（雙大括號），導致了vue中綁定的插值變量失效，因為使用后端渲染，nunjucks的優先級比vue要高，所以執行插值解析的時候，nunjucks中并沒有配置對應變量的值，故前端頁面中渲染出來是空的。
解決方案
vue的官方文檔中有說明可以使用分隔符（delimiters）屬性改變插值的風格，傳送門 https://cn.vuejs.org/v2/api/#delimiters，該屬性的作用是：改變純文本插入分隔符（即可以自定義插值風格語法，vue默認使用{{}}雙大括號，你也可以使用{}$等等來替代）
注意：delimiters這個選項只在完整構建版本中的瀏覽器內編譯時可用。
示例：
<template>
<div>${test}</div>
</template>
new Vue({
delimiters: ['${', '}'],
data() {
return {
test: "世界那么大"
}
}
})
// 結果展示
<div>世界那么大</div>
修改完成，后端渲染，頁面直出，解決插值的沖突問題
