egg的controller页面渲染和vue的data数据冲突 - CNode技术社区

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

求大神解答,我怎么弄

这是语法冲突了吧

@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 已经说了解决方案,居然还能讨论这么多