摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。
Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。
我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。
因此，对于那些展示宣传型页面，如官网，必须进行服务端渲染（SSR）。
Vue官方SSR文档的配置太过繁琐，需要对node和webpack有相当不错的使用经验，对于一个前端小白而言，官方推荐NUXT。
NUXT是一款基于vue的服务端渲染框架，跟React的NEXT异曲同工。暂时的版本是0.10.6，其github主页显示很快就会发布1.0版。
$ vue init nuxt/starter
$ cd
$ npm install //安装依赖
$ npm run dev //运行
浏览器打开localhost:3000即可。
目录结构
pages文件夹：nuxt会自动将pages文件夹内的*.vue文件根据路径到对应路由。默认是index.vue。我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行。Nuxtjs 会监听pages文件夹下所有文件，当有文件变动时，浏览器对应的页面也会自动刷新，这极大的简化了我们开发的步骤。
配置文件
目录下的nuxt.config.js是我们唯一的配置入口，可以覆盖nuxt的默认配置。nuxt.config.js 的全部的配置如下:
cache：该配置项让你开启组件缓存策略以提升渲染性能。
loading：该配置项用于个性化定制 Nuxt.js 使用的加载组件。
css：该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。
plugins：该配置项用于配置那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。
head：这里可以写入页面的meta信息
build：允许你在自动生成的vendor.bundle.js文件中添加一些模块，以减少应用 bundle 的体积
dev ：该配置项用于配置 Nuxt.js 应用是开发还是生产模式。
env ：该配置项用于定义应用客户端和服务端的环境变量。
generate：该配置项用于定义每个动态路由的参数。
rootDir ：该配置项用于配置 Next.js 应用的根目录。
srcDir：该配置项用于配置应用的源码目录路径。
transition：该配置项用于个性化配置应用过渡效果属性的默认值。
vuex：Nuxt.js 会尝试找到应用根目录下的store目录，如果该目录存在，它将做以下的事情：引用vuex模块，将vuex模块 加到 vendors 构建配置中去，设置Vue根实例的store配置项。
这些内容都可以在官网上找到，建议详细阅读官网文档及github仓库。
为什么选择使用NUXT做SSR？
1.配置非常简单：我们只需关注前端内容，不需要对服务端的内容了解很多就可以完成服务端渲染。
2.文档友好：开发文档通熟易懂，非常详细，内容完善。
3.无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装
4.内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件。
5.不用写路由，自动根据目录结构生成路由。
小结
框架本身还有很多地方需要优化，所以也只能踩一个坑补一个坑，有时间要多看看源码，改源码。
NUXT目前来讲在大型项目中应用较少，只是比较适用于轻量级的，偏展示型的网站。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84581.html
摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。 我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...
摘要：公司的招聘要求都提到了至少熟悉其中一种前端框架，有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型，并来说说选其技术的几大优势。技术的优势互联网前端大潮后，前端出现了大框架，分别是与。 1、技术选型的背景前端技术发展日新月异，互联网上出现的新型框架也比较多，如何让新招聘的人员...
摘要：为了解决问题，推出了服务端预渲染，以便提高对优化。应用，到了，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式渲染出来的，称之为客户端渲染。客户端接收数据，然后完成最终渲染。通过对客户端服务端基础框架的抽象组织，主要关注的是应用的渲染。 现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、React和Vue等，虽然写框架能够使我们快速的完成开发，但是由于前...
摘要：原文链接开发一个单页面应用，相信很多前端工程师都已经学会了，但是单页面应用有一个致命的缺点，就是极不友好。基于它，我们可以快速开发一个基于的单页面应用。只有数据流存在相关配置时可用。引入后，所有页面均有效。 原文链接 Vue 开发一个单页面应用，相信很多前端工程师都已经学会了，但是单页面应用有一个致命的缺点，就是 SEO 极不友好。除非，vue 能在服务端渲染（ssr）并直接返回已经渲...
阅读 3011·2021-09-02 15:41
阅读 2674·2021-09-02 09:48
阅读 1234·2019-08-29 13:27
阅读 1046·2019-08-26 13:37
阅读 699·2019-08-26 11:56
阅读 2328·2019-08-26 10:24
阅读 1506·2019-08-23 18:07
阅读 2511·2019-08-23 15:16
