目录结构-no-ssr-demossr之前的工程代码用于对比-vuecli2ssr将vuecli生成的工程转为ssr-prerender-demo使用prerender-spa-plugin的预渲染demo-readme-imagesreadme文件几张图ssr就是服务器端不用html字符串直接渲染Vue组件，发送给浏览器，最后在浏览器混合成一个交互的Application服务器呈现的Vue.js应用程序也可以被认为是“同构的”或“通用的”，因为应用程序的大部分代码都可以在服务器和客户端上运行。为什么要使用更好的SEO和更快的内容到达时间（time-to-content）如何做vue-server-rendererNuxt.js是一个SSR，指的是React.js栈框架下Next.js的一个更高层封装接口。它用vue-router、vuex和webpack设置封装了一层需求，可以快速开发SSR。预渲染如果您调查服务器端渲染(SSR)仅用于改进少数营销页面（例如/、/about、/contact等）以实现SEO，那么您可能需要预渲染。与其使用Web服务器即时动态编译HTML，不如使用预渲染在构建时简单地生成特定于路由的静态HTML文件。优点是设置预渲染更容易，并允许您将前端作为一个完全静态的站点。如果您使用webpack，则可以使用prerender-spa-plugin轻松添加预渲染。缺点发展条件有限。浏览器特定的代码只能用在某些生命周期钩子函数（lifecyclehook）中；某些外部扩展库（externallibrary）可能需要特殊处理才能在服务器呈现的应用程序中运行。涵盖构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页应用程序(SPA)不同，服务器呈现的应用程序需要Node.js服务器运行时环境。更多的服务器端负载。在Node.js中渲染一个完整的应用程序显然会比只服务于静态文件的服务器消耗大量的CPU资源（CPU-intensive-CPU-intensive），所以如果你期望在高流量的环境中使用它（hightraffic),请相应地准备服务器负载，并明智地使用缓存策略。注意事项如果你打算在你的vue项目中使用node中的SSR，那么在通用代码中，我们必须并且需要遵守以下约定：通用代码：在客户端和服务端都运行的部分是通用代码。注意服务端只调用beforeCreat和created钩子，所以不能在created中初始化一个定时器，然后在mounted或destroyed中销毁定时器，否则服务器会被这些定时器慢慢榨干。单线程机制，在服务器端渲染时，进程中有类似单例的操作，那么所有的请求都会共享这个单例的操作，所以要使用工厂函数来保证每个请求之间的独立性。如果在beforeCreat和createdhook中使用了第三方API，需要保证这类API在节点端运行时不会出错，比如在createdhook中初始化一个数据请求操作，即正常且极其合理。但是如果单纯的使用XHR来操作，那么在node端渲染的时候就会出现问题，所以应该使用axios这个浏览器和服务端都支持的第三方库。最重要的一点：不要使用document这种只能运行在浏览器端的API，在一般的代码中，反之，不能使用只能运行在节点端的API。结构与中间层如何结合的疑惑。预览图见github实现过程图。看github应用坑UnhandledPromiseRejectionWarning:UnhandledPromiseRejection(rejectionid:30):Error:connectECONNREFUSED127.0.0.1:80控制台抛出未捕获，多么贴心的功能。我曾经默默地吃过这个异常。在项目中调试简直令人陶醉。https://www.zhihu.com/questio...2.http-proxy-middlewareconnectECONNREFUSED127.0.0.1:80解决方案1.将节点服务器端口改为 127.0.0.1:80，接口服务器端口更改将其设置为 127.0.0.1:80，并在asyncData方法使用的请求url中添加域名+端口，如下图exportdefault{asyncData({params}){returnaxios.get(`https://127.0.0.1:3000/api/${params.id}`).then((res)=>{return{title:res.data.title}})}}参考：NuxtServerErrorconnectECONNREFUSED127.0.0.1:80错误解决3.axios将post请求数据转换为formdataaxios({url:'/api/index/getIndexlbt',method:'post',data:{relevanceId:this.$route.params.id,pictureType:4},transformRequest:[function(data){letret=''for(letitindata){ret+=encodeURIComponent(it)+'='+encodeURIComponent(data[it])+'&'}returnret}],headers:{'Content-Type':'application/x-www-form-urlencoded'}})4.Computed属性“currentPage”被分配给但它没有setter//currentPage(){//returnstore.state.currentPage//}currentPage:{get:function(){returnstore.state.currentPage},set:function(){}}https://segmentfault.com/q/10...https://github.com/ElemeFE/mi...5.vuexdispatch和commitcommitmutation的区别很简单。异步操作和同步操作的区别。当你的操作行为包含异步操作时，比如向后台发送请求获取数据，你需要使用action的dispatch来完成。其他人可以使用提交。vue中改变state的值参考官方资料vue-ssrssr适用于多页还是单页https://github.com/vuejs/vue-...\https://github.com/hilongjw/v...理解ssr简单VueSSRDemoVue项目SSR改造实战从Scratch搭建vue-ssr系列2：客户端渲染与Webpack2+vue2踩坑之旅从Scratch搭建vue-ssr系列3：服务端渲染之谜不错的文章推荐Vue项目SSR改造比较强，可供参考。史上最详细易懂的vue服务端渲染（ssr）教程，轻松看懂。对后期施工用处不大。让vue-cli初始化后的项目集成支持SSRvue-hackernews-2.0源码解读讲解项目整体结构。可以结合官方demo查看更好Vue全站服务器渲染SSR实践详解Vue&Vuex实践掘金项目实战参考demo官方demo官方demo大而全，有问题的是界面墙。vnews解决官方demo无法访问的问题。功能和vue-hackernews-2.0类似，但是内容来源改为掘金网站，所以serviceworker不能使用push功能。美女听说很好，但是没试过其他的mmf-blogvuejs2.0server-siderenderingv2versionvue-cnode-mobile问题：组件的异步加载方式，2.为什么router和store要改成code异步应用程序的细分或惯性？加载有助于减少浏览器在初始渲染时下载的资源大小，可以大大提高大型包的交互时间（TTI-time-to-interactive）。这里的关键是在折叠上方的初始折叠“只加载你需要的东西”。如何在不跳转页面的情况下验证异步路由的优势10测试时间对比每一个开发者都必须配置ssr环境单页多页结构如何将源码与中间层结合项目整体no-ssr-demovuecli2ssrprerender-demo是有帮助请点个星！
