egg的controller页面渲染和vue的data数据冲突
发布于 5 天前 作者 jiayin3204 579 次浏览 来自 问答

egg的controller在渲染到页面上的时候是使用{{}}来渲染的，但是在使用vue的时候，data里的数据在页面上也是使用的{{}}，这时页面上的vue渲染不出来 这时候vue失效，不渲染也不报错 微信图片_20180326131253.png 这个是在controller里的pt在页面时可以渲染的 微信图片_20180326131348.png

求大神解答，我怎么弄

37 回复

这是语法冲突了吧

@fruit-memory 是啊，可是我还是需要用vue的，怎么办呢，网上也有人用vue和egg，但是好像没有出现这个问题

你用的是什么模板引擎

egg的controller在渲染到页面上的时候是使用{{}}来渲染的

egg 渲染页面依赖的是模板引擎的渲染能力，其中默认是 nunjucks，参考：https://eggjs.org/zh-cn/core/view.html。

文中提及的问题重点在于后端（egg）和前端（vue）进行模块渲染时，占位符（{{}}）冲突。那么解决该问题的话：

1、可以从前（mustache）后端（nunjucks）分别对占位符进行配置，其中相关参数自行学习一下； 2、（显然方案 1 并不是最佳实践）我们尽量保持代码的规范和统一，占位符修改后整体编码风格会受到影响，因此还是建议适当的分离前后端的模板；（es5 下使用 vue 依然可以使用组件化的方式，因此在 html 中没有必要直接出现 vue 组件的视图模板）

@nanzm 就是egg推荐的那个egg-view-nunjucks

这个简单 网上很多有解决方案 试试这个 {% raw %}{{这里写变量}}{% endraw %}

@x-cold 号，了解了

@nanzm 这这这，你这种的方法怎么查，是占位符？

google 啊 老铁

之前碰到过

@nanzm 老铁就算是查我也得知道方向吧

要什么方向 不就是模板语法冲突吗 （ vue nunjucks 冲突）关键词搜呗

@nanzm 老铁，你既然碰到过快教教我吧，哭晕在厕所

v-text 试过了吗

@nanzm 试过了，没有用，页面中间没内容，也不报错，然后用Vue.config.delimiters改vue的定界符还报错

@nanzm 老铁老铁，我解决啦，啊哈哈哈哈哈哈

@jiayin3204 delimiters是在实例化声明的。

new Vue({ delimiters: [’${’, ‘}’] })

明明可以好吗 我都亲手试了一下

@jiayin3204 坑 差点怀疑自己 亲手试了一下

@nanzm 你看你，还说我坑，我是一只小白而已，请怀着一颗慈悲的心对待我们

为什么会冲突呢？ 两者有交集的地方只有 index.html 吧，vue 的 template 又不会有 nunjucks 的东西

@atian25 只是在写的时候 有冲突 {{ }} 不想让 nunjucks 解析的话 要这个 {% raw %}{{这里写变量}}{% endraw %}

@nanzm 不过你说的这种方法我这还真不行，我是改变了vue的渲染方式才解决的

@jiayin3204 那也可以 更干脆

@nanzm 我不明白为啥会冲突，给个最小可复现代码？

@atian25 因为默认的vue在HTML中的语法的{{}}，而nunjucks的语法也是双括号，页面优先选择了服务端的渲染机制，所以vue失效，所以才会出现冲突

@atian25 或许他是多页用vue！！！并不是SPA

建议你把需要Vue解析的代码写在单个Vue文件里面，不要写在首页，否则的话，模板会帮你全解析完

@jiayin3204 我的问题就是，为什么它们会在同一个页面啊。。。 vue 的不是都写到组件的 template 里面，然后在编译期就已经 inline 为字符串了么。

难道你的都是写在首页 index.html 里面的 <template> </template> ?? 这样肯定不好啦。

匿了。。。 没代码空谈没意思，费劲。

@atian25 对，我没有使用组件，只是单纯的使用vue做了多页的应用，因为项目比较小

@jiayin3204 那也没必要都塞到一个 index.html 里面吧。 那你就放到 {%raw%} 里面就好了

@atian25 就一个移动端的页面，没有必要太麻烦吧，使用vue也是因为有表单提交，用vue方便一点，还有你说的这个 {%raw%} 是什么鬼

https://cn.vuejs.org/v2/api/#delimiters

自己看吧 把vue的 {{}} 改为 [[]]

我是不建议修改 vue 的 delimiters，在他这个项目中，vue 才是主要逻辑。

raw 上面别人不是教你了么，nunjucks 的 http://mozilla.github.io/nunjucks/templating.html#raw 自己看呗

模板引擎的界定符，自己搜一下

修改下 模版引擎的界定符

@nanzm 已经说了解决方案，居然还能讨论这么多

回到顶部