从0带您打造企业级 Vue 服务器渲染 Nuxt.js (一) 入门

写在开始前

公司团队技术栈一直主要使用 Vue，因为 SPA 模式开发有几大痛点，团队在2017年开始尝试 SSR（服务端渲染）。 记得刚开始 Nuxt.js 尚未到1.0（坑哭了），到目前为止团队已经经历了4个 Nuxt.js 项目，版本也从0.xx 一直到如今的 2.xx，我会把这期间遇到的问题和经验总结给你们，但愿在使用 Nuxt.js 少跳些坑。

我能学到些什么

• Nuxt 入门（普及些基础的知识，项目搭建）
• Nuxt 性能提高（如何经过内网请求让你的api加快请求速度）
• Nuxt 常见的问题和解决方案
• Nuxt 线上部署

正文

SSR 的不少概念性的问题建议移步官方文档本文不作详细介绍。

1.为何服务端渲染能解决 SEO 和首屏渲染

首先不论是Vue React Angular 等单页面应用渲染是从服务器获取所需Js，在客户端将其解析生成 HTML， 这样会带来几个问题。

• 首屏先去服务器请求完成 Js 而后再由 Js 生成 HTML 元素，这会致使网站首屏加载缓慢，不利于用户体验。
• 页面的 HTML 元素都是由后期的 Js 动态生成，搜索引擎没法爬取（谷歌目前已经能够爬取SPA页面，因为咱们在天朝，你懂得）

2.为何采用 Nuxt.js

首先使用 SSR 开发成本对纯前端来讲仍是比较高的，须要了解 SSR 渲染原理，有基础的 Node 知识。

还有一些生命周期，中间件须要本身去处理，Webpack, 这些搭建完成就会挡住大部分人。

Nuxt.js 提供了基础的 Webpack 和 Node 的封装，不须要咱们再去搭建繁琐的 SSR 程序， 只需经过特定的文件结构和 Nuxt.js 提供的 Api 便可快速搭建一个 SSR 程序，详细能够异步官方文档。

搭建一个 Nuxt.js 项目

Nuxt.js 2.0 之后提供了脚手架 create-nuxt-app

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

$ npx create-nuxt-app <项目名>
复制代码

或者用yarn ：

yarn create nuxt-app <项目名>
复制代码

完成后脚手架会让你进行一些自定义的选择。

1.在集成的服务器端框架之间进行选择:

Nuxt.js 2.0 之前脚手架默认是不把 Node 服务器暴露出来的，只提供默认渲染服务器，当初咱们用 Koa 分离出来还花费了一些时间，如今官方已经吧服务端框架直接在脚手架中让用户自由选择了（感谢）。

若是是初学建议你选择 None （Nuxt 默认服务器）框架不会暴露服务端代码到你目录，这样有个缺点，之后作些自定义的事情时候不是很方便。

咱们团队成员基本都会使用 Egg 因此果断选择了 Koa 来建立项目，也建议您选择一个服务端框架进行初始化，后续本文会介绍一些针对 SSR 下内网请求加速，SSR 下使用中间层加速页面接口请求速度。

当运行完时，它将安装全部依赖项，如今启动项目愉快的玩耍吧:

$ npm run dev || yarn dev
// 应用如今运行在 http://localhost:3000 上运行。
复制代码

Nuxt.js 流程图

下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户经过 切换路由渲染页面）的流程：

Nuxt.js 目录结构

里面基本的目录官方都有详细介绍官方文档，能够看见咱们用了 Koa 初始化项目后会多一个 Server 目录 这个文件里面的 index.js 就是服务端框架的代码，若是对 Koa 不熟或者 Node 不熟能够先去官方充充电，入门仍是比较简单的。

开始配置咱们的项目

因为咱们主要采用手机页面因此会配置自适应和一些便于开发的配置

配置nuxt.config.js

配置postcss

postcss: [
      require('postcss-import')({}),
      require('postcss-url')({}),
      require('postcss-preset-env')({
        browsers: 'last 2 versions'
      }),
      require('postcss-aspect-ratio-mini')({}),
      require('postcss-px-to-viewport')({
        viewportWidth: 375,
        viewportHeight: 667,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      }),
      require('postcss-viewport-units')({
        filterRule: rule =>
          rule.selector.indexOf('::after') === -1 &&
          rule.selector.indexOf('::before') === -1 &&
          rule.selector.indexOf(':after') === -1 &&
          rule.selector.indexOf(':before') === -1
      })
    ]
复制代码

之前咱们适配各类手机主要是采用rem方案

如今浏览器对 vw 单位支持的愈来愈好，下面也给你们介绍一下在 Nuxt.js 中采用 vw

postcss-import：主要功有是解决@import引入路径问题。使用这个插件，可让你很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url让你引入文件变得更轻松。

postcss-url：该插件主要用来处理文件，好比图片文件、字体文件等引用路径的处理。

postcss-preset-env：用来自动处理浏览器前缀的一个插件。你也能够像这样来指定last 2 versions 或者 > 5%

postcss-aspect-ratio-mini：主要用来处理元素容器宽高比。在实际使用的时候，具备一个默认的结构

postcss-px-to-viewport：主要把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。在配置中须要配置相关的几个关键参数：

viewportWidth: 375,// 视窗的宽度，对应的是咱们设计稿的宽度，通常是750 （若是咱们设置的宽度是300px，那么编译以后的宽度为(300/750*100)=40vw,若是频宽实际为375px，那么该元素的宽度为（375*0.4）= 150px）
viewportHeight: 667,// 视窗的高度
unitPrecision: 3,// 指定`px`转换为视窗单位值的小数位数（不少时候没法整除）
viewportUnit: 'vw',// 指定须要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，能够自定义，能够无限添加,建议定义一至两个通用的类名
minPixelValue: 1,// 小于或等于`1px`不转换为视窗单位，你也能够设置为你想要的值
mediaQuery: false// 容许在媒体查询中转换`px`
复制代码

postcss-viewport-units：插件主要是给CSS的属性添加 content 的属性，配合 viewport-units-buggyfill 库给 vw 、 vh 、 vmin 和 vmax 作适配的操做。

这是实现 vw 布局必不可少的一个插件，由于少了这个插件，这将是一件痛苦的事情。后面你就清楚。

如今 PostCSS 主要配置以及完成了，根据我的须要作删减。

配置环境变量来实现自动编译不一样环境代码

首先去 babel plugins 配置一个插件

// 首先导入 webpack
const webpack = require('webpack')

plugins: [
  new webpack.DefinePlugin({
    // 接收环境变量并注入
    'process.env': JSON.stringify({
      NODE_EVENT: `${process.env.NODE_EVENT}`
    })
  })
],
复制代码

而后咱们去package.json 配置 local qa pre prd 等几个环境

"dev": "cross-env NODE_EVENT=local NODE_ENV=development nodemon server/index.js --watch server",
"qa": "cross-env NODE_EVENT=qa nuxt build",
"pre": "cross-env NODE_EVENT=pre nuxt build",
"prd": "cross-env NODE_EVENT=prd nuxt build",
复制代码

接着去新增个config/index.js的配置文件

let starBaseUrl = ''

const NODE_EVENT = process.env.NODE_EVENT

if (NODE_EVENT == 'local') {
  // 本地开发环境
  starBaseUrl = 'http://xx.cn'
} else if (NODE_EVENT == 'qa') {
  // 测试
  starBaseUrl = 'http://xx.cn'

} else if (NODE_EVENT == 'testprod') {
  // 预生产
  starBaseUrl = 'http://xx.cn'
} else if (NODE_EVENT == 'prod') {
  // 生产
  starBaseUrl = 'http://xx.cn'
}

module.exports = {
  starBaseUrl
}
复制代码

如今咱们在生产时候就能编译出不一样环境的代码，避免收到修改致使的失误。

尽请期待下一章