Vue作的SPA如何配合express
发布于 7 年前 作者 zhang962976642 4809 次浏览 来自 问答

vue新人,不怎么理解vue的SPA和express配合工作,以及express的后台渲染vue该怎么实现。 还有vue的多页面应用在webpack配置的时候入口文件改成对象就可以了吗? 再次萌新感谢各位大佬!

13 回复

vue用vue-router走前端路由 express做后台api接口 这要你在会vue的基础上还要会vue-router
vue会用到的路由全部返回vue的主文件 vue-router会自动帮你拼接正确的组件 然后交互就用jquery啊 vue-resource fetch啥的ajax 服务端渲染刚接触就直接上nuxtjs 都帮你配好了 不过还是建议先走最普通的有vue基础先

@yyss8 我了解你的意思了 前台是一个vue监听80端口,后台express监听3000端口 然后这是前后分离,简单一点就是前台SPA 走路由通过 mounted去发起一个ajax走后台服务器提供的Api 去数据库查东西 然后res.json({xx:xxx}), 然后前台vue ajax获取这个json去解析渲染就好了把 那么再请教您一下,如果用express渲染用什么办法,还是启动两个cmd去监听端口吗

vue本身并不是一个服务器 之所以你说监听80端口是因为你装的可能是vue-cli或者其他啥 他们已经帮你建了一个内置的express服务器了 所以一种方法是更改vue-cli的内置后台 要不就自己动手搭建一个express

@yyss8 对的我装了vue-cli,那么我如果使用vue-cli那么就拿上面的流程走,您说的自己搭express服务器监听一个端口那么就需要用express渲染vue。 就回到了关键问题 express怎么去渲染vue,百度差的资料都没看懂,请问一下您有什么好方法没!

这些vue主文档应该都是有的 可能只是你没看清楚

假设你webpack的output文件是bundle.js 那你就直接用express 输出index.html文件 然后这个index.html里面用script引入bundle.js就好了

讲道理vue和后端express没有啥太大关系

@yyss8 这里有点不太懂,我去官网看看手册把,谢谢您了

你可以先不用webpack 直接在index.html文件里面引入vue 就像引入jquery一样 然后在script写vue的组件

然后再开始学webpack打包分散vue组件

@yyss8 您的意思是我直接res.render views目录下面的.html文件 然后主文件script引入vue.js 吗

@yyss8 我还是去学习一下webpack把, .vue文件方便一点

res.render就是用模版引擎了 其实有vue那些都不太需要 不过这也不重要 你就直接输出一个引入了vue.js的html文件就好 比如 <body> <div id=“main”> </div> <script src="/js/vue.min.js"></script> <script src="/js/vuex.js"></script> </body> 然后express app.get(’/’,(req,res,next) => { res.sendFile(path.resolve(__dirname, ‘static’, ‘index.html’)); });

无论什么请求都把index.html发过去,然后配置页面路由就好了 ——来自吴小粥的cnode-react手机版

回到顶部