一、什么是 SSR ?
SSR就是服务器渲染，什么是服务器渲染？由服务器组装好DOM元素，生成HTML字符串给到浏览器，也就是在浏览器里面是可以看到整个页面的DOM源码的。SSR解决的问题:SEO：搜索引擎的优先爬取级别是页面的HTML结构，当我们使用SSR的时候，服务端已经生成了与业务相关联的HTML，这样的信息对于SEO是很友好的。内容呈现：客户端无需等待所有的JS文件加载完成即可看见渲染的业务相关视图（压力来到了服务端这边，这也是需要做权衡的地方，需要区分哪些由服务端渲染，哪些可以交给客户端）。SSR相关的弊端:代码兼容：对于开发人员来讲，需要去兼容代码在不同环境的运行Vue SSR所需要的服务端环境是Node，有一些客户端的对象，比如dom、windows之类的则无法使用。服务器负载：相对于前后端分离模式下服务器只需要提供静态资源来说，SSR需要的服务器负载更大，所以在项目中使用SSR模式要慎重，比如一整套图表页面，相对于服务端渲染，可能用户不会在乎初始加载的前几秒，可以交由客户端使用类似于骨架屏，或者懒加载之类的提升用户体验。Vue与Vue SSR与原生HTML页面源码区别对比，在网页上右键查看源码：Vue SSR与原生HTML是可以看到源码标签的
Vue默认是看不到源码标签的，因为它是 JS 组装的。
二、什么是 Nuxt.js ?
- 目前做
SSR的方式有几种，大概列举一下：
1、前端编写原生静态页面，给到服务器，通过服务器框架进行组合数据，例如php的Web 开发。
2、使用 prerender-spa-plugin 插件，作者是Vue核心团队的成员，这种实现方式并不叫SSR，而是预渲染。不过效果上是一样的，甚至某种程度上来说可能要比SSR更好。相比官方提供的SSR 繁琐配置，prerender配置更简单快捷。
3、Vue官方提供的轮子在Node端做SSR, 相对于prerender插件来说，SSR上手真的超级复杂，有兴趣可以自行查看 Vue SSR 指南。这种方法可以做到真实数据实时渲染，完全可供SEO小蜘蛛尽情的爬来爬去，完全前后端同构，路由配置共享，不再影响服务器404请求，但是配置比较麻烦、处理流程比较复杂 (比对预渲染插件，复杂太多)约束较多，对服务器会造成较大的压力，服务器成本太高了。
4、Nuxt.js 是使用Webpack和Node.js进行封装的基于Vue的SSR框架，不需要自己搭建一套SSR程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的Web应用。
我这里选择使用 Nuxt.js 来做SSR。
三、通过 Nuxt.js 创建项目
- Nuxt.js 官方安装流程，项目需要依赖
Node环境，我这里用的包管理工具是NPM，Nuxt.js版本是2.14.5。 - 创建项目，确保安装了
npx（npx在NPM版本5.2.0默认安装了）：
$ npx create-nuxt-app <项目名> $ npm create nuxt-app <项目名> $ yarn create nuxt-app <项目名>
- 或者用
yarn：
$ yarn create nuxt-app <项目名>
- 我这里用
npx创建一个测试项目，例如：
$ npx create-nuxt-app nuxt-test
// 进入到文件夹，执行创建项目命令 dengzemiaodeMacBook-Pro:test dengzemiao$ npx create-nuxt-app nuxt-test create-nuxt-app v3.5.2 ✨ Generating Nuxt.js project in nuxt-test // 项目初始配置，自己看着选，用什么选什么 不懂就选 None，后面也可以装的。 ? Project name: nuxt-test ? Programming language: JavaScript ? Package manager: Npm ? UI framework: None ? Nuxt.js modules: Axios - Promise based HTTP client ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele ction) ? Testing framework: None ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript) ? What is your GitHub username? dengzemiao ? Version control system: None .....等待一段时间，就会提示创建项目成功 🎉 Successfully created project nuxt-test // 如果是开发中，运行 npm run dev 就可以，开发者模式 To get started: cd nuxt-test npm run dev // 如果是需要发布到线上了，需要先 build 在 start 才能正式发布 To build & start for production: cd nuxt-test npm run build npm run start
四、Nuxt.js 本地运行
- 这篇文章只讲
创建项目到发布服务器，以及服务器怎么部署才能通过服务器访问，其他项目细节配置放在其他文章中去写。 - 创建完成项目之后，可以先运行项目一下，用上面
To get started或To build & start for production中的方式运行起来项目，只是前者是development模式，后者是production模式。
dengzemiaodeMacBook-Pro:test dengzemiao$ cd nuxt-test dengzemiaodeMacBook-Pro:nuxt-test dengzemiao$ npm run dev > nuxt-test@1.0.0 dev /Users/dengzemiao/Desktop/Project/web/test/nuxt-test > nuxt ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯
- 然后通过上面的
http://localhost:3000/打开浏览器进行访问，但是这个是开发环境。 - 在
pages里面的.vue文件都会被自动转成路由，文件夹也是一样。 - 例如：项目
pages文件夹里面有个index.vue文件，它会被编译成index.html，在路由中也就是/index，可以尝试修改index.vue里面的内容，或者新建一个.vue文件进行测试内容。 - 例如：我在
pages里面创建一个测试文件dzm.vue，运行起来项目，访问的路径就是http://localhost:3000/dzm
<template> <div> dzm 测试页面 {{ env }} </div> </template> <script> export default { data () { return { // 当前启动的环境 development: 开发环境 production: 生产环境 env: process.env.NODE_ENV } } } </script>
五、Nuxt.js 直接 ip 访问项目(生产和开发都适用)
- 运行开发环境
$ npm run dev
╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯
- 运行生产环境
$ npm run build+$ npm run start
╭──────────────────────────────────────────╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Memory usage: 29.1 MB (RSS: 73.1 MB) │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰──────────────────────────────────────────╯
- 通过上面的两个运行的结果，得到的地址都是
http://localhost:3000/，这个是固定本地localhost:3000才可以进访问，需要改成支持本地ip也能访问，也就是你拿到本机电脑的ip加上端口也能进行访问到，例如:http://10.0.93.169:3000
