Nuxt.js（Vue SSR）创建项目到服务器（Nginx+PM2）部署详细流程SSR 就是 服务

一、什么是 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 ? 三、通过 Nuxt.js 创建项目 四、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/ │ │ │ ╰───────────────────────────────────────╯

然后通过上面的 :3000/ 打开浏览器进行访问，但是这个是开发环境。

在 pages 里面的 .vue 文件都会被自动转成路由，文件夹也是一样。

例如：项目 pages 文件夹里面有个 index.vue 文件，它会被编译成 index.html，在路由中也就是 /index，可以尝试修改 index.vue 里面的内容，或者新建一个 .vue 文件进行测试内容。

例如：我在 pages 里面创建一个测试文件 dzm.vue，运行起来项目，访问的路径就是 :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/ │ │ │ ╰──────────────────────────────────────────╯

通过上面的两个运行的结果，得到的地址都是 :3000/，这个是固定本地 localhost:3000 才可以进访问，需要改成支持本地 ip 也能访问，也就是你拿到本机电脑的 ip 加上端口也能进行访问到，例如: :3000

找到 nuxt.config.js，添加下面代码：

export default { head: {...}, css: [...], // 配置服务器（主要是这个配置） server: { // port: 8000, // default: 3000 host: '0.0.0.0', // default: localhost (推荐) // host: '0', // 等于 host: '0.0.0.0' 这样配置，在mac上这么配置没问题，但是在window上这么配置有报错。 timing: false },

再次运行项目，生产或测试都行，访问地址就会变成本机的 ip 地址加端口：

╭─────────────────────────────────────────╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Memory usage: 29.4 MB (RSS: 74 MB) │ │ │ │ Listening: http://10.0.93.169:3000 │ │ │ ╰─────────────────────────────────────────╯

本地运行项目就到这里结束了，下面需要将项目发布到服务器运行起来。

四、Nuxt.js 上传服务器（Nginx + Node + PM2）