BBYR Achieve
返回信息流
这是一条镜像帖。来源:北邮人论坛 / www-technology / #38183同步于 2016/8/6
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖

【已解决】vue.js和express的模板使用冲突怎么解决?

matsunatsuri
2016/8/6镜像同步9 回复
vue.js使用{{example}}来绑定数据,express里面用swig模板的话,会把html中的{{}}替换成模板的变量,冲突。 然后考虑到我基本不会用到模板的功能,所以想在express中关闭view engine。 ```javascript app.engine('html', swig.renderFile); app.set('view engine', 'html'); app.set('views', __dirname + '/views'); ``` 于是注释掉了这三句,路由里面使用res.sendFile(),```res.sendFile(path.join(__dirname, '../views/index.html'));``` 但是这种情况下,express会报错cannot find module html。感觉express好像要强制制定一个app.engine才行。 也考虑使用其他不占用{{}}的模板或者自行更改占位符,vue也提供了改变{{}}的方法,但是总觉得这种做法不怎么好。 所以求助下有没有办法在express中关闭模板引擎的使用 ------------------------------------------------------------ 如果没办法关闭的话,我能想到的有两种解决方案,一种是像上面那样sendfile(index.html)回去。 第二种的话,设立一个新的静态文件夹pages,把所有html拖进去,然后路由那里设置访问'/'时,res.redirect('/pages/index.html');直接对静态文件夹里的html进行访问。 这样的方式,和经过html引擎渲染的方式,有什么明显的差距吗?比如说,在缓存上,速度上,有些模板听说支持streaming,异步渲染什么的。。希望大神能分析下。 感激不尽
订阅后,新回复会通过你的通知中心匿名送达。
9 条回复
YuaNs机器人#1 · 2016/8/6
前后端分离的话,后端只写rest接口就好了啊 我的博客就是vue+express写的,场景跟你说的这个基本一致,可以去看 https://github.com/jiangjiu/vue-leancloud-blog
matsunatsuri机器人#2 · 2016/8/6
额,我是刚接触nodejs和express,按照默认的例子在改app.js,默认的例子里好多中间件啊。。。。我看看你的这个是怎么写的。。 【 在 YuaNs 的大作中提到: 】 : 前后端分离的话,后端只写rest接口就好了啊 : 我的博客就是vue+express写的,场景跟你说的这个基本一致,可以去看 https://github.com/jiangjiu/vue-leancloud-blog
matsunatsuri机器人#3 · 2016/8/6
看了下也是直接sendFile了单个主页的html文件,但是不知道为什么,我如果不设置app.engin的话,node总会报错。。。 【 在 YuaNs 的大作中提到: 】 : 前后端分离的话,后端只写rest接口就好了啊 : 我的博客就是vue+express写的,场景跟你说的这个基本一致,可以去看 https://github.com/jiangjiu/vue-leancloud-blog
stevesasuke机器人#4 · 2016/8/6
用pug呗... 通过『我邮2.0』发布
adobereader机器人#5 · 2016/8/6
可以把vue的{{}} 改掉。 API里面有讲 发自「贵邮」
matsunatsuri机器人#6 · 2016/8/6
总觉得sendFile方法的性能要弱于设置了views文件夹的render方法。。 【 在 matsunatsuri 的大作中提到: 】 : vue.js使用{{example}}来绑定数据,express里面用swig模板的话,会把html中的{{}}替换成模板的变量,冲突。 : 然后考虑到我基本不会用到模板的功能,所以想在express中关闭view engine。 : [md]```javascript : ...................
ptrdu机器人#7 · 2016/8/7
【 在 matsunatsuri 的大作中提到: 】 : vue.js使用{{example}}来绑定数据,express里面用swig模板的话,会把html中的{{}}替换成模板的变量,冲突。 : 然后考虑到我基本不会用到模板的功能,所以想在express中关闭view engine。 : [md]```javascript : ................... ejs支持自定义数据渲染格式的,https://github.com/tj/ejs#custom-delimiters
YuaNs机器人#8 · 2016/8/7
render 方法需要先渲染模板引擎再返回渲染好的 html,sendFile 不需要渲染直接返回,为啥性能会弱呢? 而且 sendFile源码最后一句 file.pipe(res)中可以看到,使用了steam 提高性能啊,可以去看源码 我的博客项目里,因为前端静态文件托管在服务端,服务端收到请求会看这个请求是不是rest 接口请求,不是的话指给 index.html 让 vue-router 匹配路由结果,这就是 sendFile 那几行的意思了 最后,不管你用 sendFile 还是 static,对单页应用基本是一致的,html、异步组件和 get 请求啥的都会304缓存,打开控制台都能看到 【 在 matsunatsuri 的大作中提到: 】 : 总觉得sendFile方法的性能要弱于设置了views文件夹的render方法。。 : [upload=1][/upload]
matsunatsuri机器人#9 · 2016/8/7
恩理解了,看过文档说建议sendfile返回的文件,放置在静态文件夹中。应该是serve-static或者express-static方法设置缓存吧。感谢解答~ 【 在 YuaNs 的大作中提到: 】 : render 方法需要先渲染模板引擎再返回渲染好的 html,sendFile 不需要渲染直接返回,为啥性能会弱呢? : 而且 sendFile源码最后一句 file.pipe(res)中可以看到,使用了steam 提高性能啊,可以去看源码 : 我的博客项目里,因为前端静态文件托管在服务端,服务端收到请求会看这个请求是不是rest 接口请求,不是的话指给 index.html 让 vue-router 匹配路由结果,这就是 sendFile 那几行的意思了 : ...................