Nuxtjs实现服务端渲染和静态化站点

  • Nuxtjs实现服务端渲染和静态化站点已关闭评论
  • 156 次浏览
  • A+
所属分类：Web前端
摘要

本文将介绍如何使用Nuxtjs对vue项目进行ssr和静态化处理。首先，我们简单了解下Nuxtjs框架，Nuxt.js是一个基于Vue的通用框架，主要用于解决Vue项目的服务端渲染(SSR)。
它本质上是一个Vue框架，增加一层node服务，通过对客户端/服务端的抽象封装，使用Nuxt各种资源配置，处理服务端渲染。
除了服务端渲染以外，Nuxtjs还提供生成静态化站点的能力。
便宜好用的国外VPS推荐

本文将介绍如何使用Nuxtjs对vue项目进行ssr和静态化处理。

Nuxtjs简单介绍

首先，我们简单了解下Nuxtjs框架，Nuxt.js是一个基于Vue的通用框架，主要用于解决Vue项目的服务端渲染(SSR)。
它本质上是一个Vue框架，增加一层node服务，通过对客户端/服务端的抽象封装，使用Nuxt各种资源配置，处理服务端渲染。
除了服务端渲染以外，Nuxtjs还提供生成静态化站点的能力。

Nuxtjs实现服务端渲染和静态化站点

使用Nuxtjs

当我们需要进行SSR服务端渲染处理，使用Nuxtjs的时候，为了避免各种库的版本兼容等问题，建议使用官方提供的 create-nuxt-app 新建一个标准的nuxtjs项目，然后再将原有Vue项目代码迁移过来。

创建一个新的Nuxtjs项目：

npx create-nuxt-app <项目名> # 或 yarn create nuxt-app <项目名>

创建好新的Nuxtjs项目后，补充项目目录结构，大致如下：

Nuxtjs实现服务端渲染和静态化站点

标注了基本结构，不一定所有结构都会用到，根据项目的不同情况进行使用。
Nuxtjs项目创建完成，建立好相应的目录结构以后，就可以把对应Vue项目里的代码迁移到Nuxtjs项目中。
大部分的页面和组件都比较好迁移，直接复制拷贝就可以，但如果涉及到路由和状态管理，需要特别处理，在介绍之前先看下Nuxtjs的配置文件。

Nuxt配置

先看下nuxt.config.js文件的基本结构，如下代码：

export default {   target: '',   srcDir: '',   head: {     title: '',     htmlAttrs: { lang: 'en' },     meta: [       { charset: 'utf-8' },       { name: 'viewport', content: 'width=device-width, initial-scale=1' },       { hid: 'description', name: 'description', content: '' },       { name: 'format-detection', content: 'telephone=no' }     ],     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]   },   css: [],   plugins: [],   components: true,   buildModules: [],   modules: [],   build: {} }

各个配置项对应不同的功能：

  • target
    部署目标，server(服务端渲染)和 static(静态化站点)
  • srcDir
    配置项目的源码路径，如代码文件方在 src 下，这里就配置 ./src
  • head
    配置页面head部分内容，该配置还能统一增加通用JS脚本如第三方统计sdk等
    也可以在pages目录下的vue文件中自行定义每一页的head内容
  • css
    定义全局样式文件或第三方库样式等，如添加通用样式：assets/style/reset.less
  • plugins
    第三方js库或自定义全局插件等
  • modules
    添加Nuxtjs模块到项目中，如添加 @nuxtjs/axios、@nuxtjs/router等
  • build
    在build的bundle.js中添加模块，减少应用bundle的体积

路由和状态管理

关于路由，正常情况下，Nuxtjs会依据页面目录(pages)结构自动生成路由配置。
但如果需要在项目中自定义添加较复杂的路由，可以使用 @nuxtjs/router 模块进行处理：

  1. 安装该模块：npm install @nuxtjs/router。
  2. 在配置文件中增加：modules: ['@nuxtjs/router']。
  3. 在项目根目录下增加路由文件 router.js，用于处理路由。

关于状态管理，可以直接在根目录结构下使用store目录，Nuxtjs会自动找到store目录，并引用 Vuex 模块，构建整个项目的状态管理。
这个过程和单独的Vue项目大致一样，只不过不用在代码里引入store文件，其他使用方式也一样：

import { mapGetters, createNamespacedHelpers } from 'vuex' const { mapMutations } = createNamespacedHelpers('config') export default {   computed: {   ...mapGetters([     'isHad'   ])   },   methods: {   ...mapMutations([     'setConfig',     'initConfig'   ])   } }

也可以使用 $store 进行操作：

this.$store.dispatch('config/setConfig', {})

命令脚本

接下来，看下package.json的命令脚本，Nuxtjs常用的scripts命令语句：

"scripts": {   "dev": "nuxt",   "build": "nuxt build",   "start": "nuxt start",   "generate": "nuxt generate" }

其中，npm run build 用于服务端渲染；npm run generate 用于静态化站点。
基于此，在这里解释下这些语句，简单看看每些语句执行后，做了什么：

  • npm run dev 单独执行，会生成根目录下的 .nuxt 目录，但该目录下不包括 dist 目录
  • npm run build 也会生成根目录下的 .nuxt 目录，该目录包含 dist、distclient、distserver
  • npm run generate
    • 如果设置配置文件 target: 'static', 则只会生成根目录下的 dist 目录，包含所有静态资源
    • 如果配置文件没设置 target, 则除了会生成根目录下的 .nuxt 目录(包含 dist、distclient、distserver)，还生成根目录下的dist 目录(包含静态资源)
  • npm run start 需要搭配 build、 generate 命令一起使用：
    • 先执行 build 再执行 start，则使用 .nuxt 目录的内容，target被设置成server
    • 先执行 generate 再执行 start，则使用 dist 目录的内容
    • 如果 nuxt.config.js 配置中的 target: 'static'，则 start 必须和 generate 一起使用

process

Nuxtjs存在两个环境，一个用于运行服务端，一个用于运行客户端，通过环境变量可以进行区分。
下面，看下Nuxtjs中的 process 几个环境变量：

  • process.server：用来标识当前环境是服务端Vue
  • process.client：用来标识当前环境是客户端Vue
  • process.static：用来区分是否是 npm run generate 生成，为true则是，为false则否

如果 nuxt.config.js 中的 target: 'static'，则 npm run dev、npm run build、npm run generate 中的 process.static 都是 true。

process.client/process.server 是在执行打包命令的时候进行转换的，这个时候会把服务端和客户端的代码分开打包，服务端的代码在node环境中执行，客户端的代码一般在浏览器中执行。

它们的存在，对我们处理一些问题很有用，如只能在客户端环境下执行的代码要做区分(window、document等)：

if (process.client) {   document.addEventListener('click', (e) => {})   window.addEventListener('resize', () => {}, false) }

如上代码，当使用了 process.client 进行判断后，这部分代码将只会打包在客户端，就不会出现找不到对象的错误了。

Nuxtjs部署

有了以上关于Nuxtjs的介绍，特别是脚本命令，我们就能很容易搞定Nuxtjs的部署了。
Nuxtjs在部署上有三种方式：服务端渲染部署、静态化站点部署、单页面应用部署。

服务端渲染部署

设置nuxt.config.js：

target: 'server'

执行打包命令：

npm run build

执行命令后，将会在根目录下生成一个 .nuxt 的目录。

当我们要在服务器上进行部署的时候，需要将Nuxtjs项目下的 .nuxt目录、static目录、nuxt.config.js、package.json 四个资源拷贝到服务器上。
在服务器上直接启动，则执行以下命令：

# 安装包： npm run install  # 启动： npm run start

PM2 启动

如果用PM2来启动，也是先安装包：npm run install。
然后，可以新建一个PM2的启动配置文件 ecosystem.json：

{   "app": [{     "name": "appWeb",     "script": "./node_modules/nuxt/bin/nuxt.js"   }] }

配置好 script 启动脚本，直接启动即可：

pm2 start ecosystem.json

静态化站点部署

设置nuxt.config.js：

target: 'static'

执行打包命令：

npm run generate

生成的静态文件位于根目录的 dist 目录（默认）下，直接将该文件拷贝web服务器上即可。

静态页面JS无效

生成静态文件时，会把pages下的每个页面都生成一个对应的html页面，但如果遇到该html页面上的js无效的情况，需要特殊处理。
我在处理nuxtjs项目，进行静态化导出的时候就碰到了JS无法执行的问题，最后使用在 layouts 布局页面中进行页面处理才解决问题，具体如下：

  1. 在 layouts 布局页面获取路由path值：toPath: this.$route.path;
  2. 在布局页面中增加对应的页面模块：
import page1 from '../pages/page1' import page2 from '../pages/page2' 
<div class="layouts">   <pp-header/>   <page1 v-if="toPath.includes('page1')"/>   <page1 v-if="toPath.includes('page1')"/>   <pp-footer/> </div>

通过路由字符串判断，获取当前路由信息，使用组件的方式加载对应的页面。
这样处理后，在使用 npm run generate 进行静态化打包时，也会把对应页面的内容替换进去。
最后生成html页面，浏览器打开后JS都能执行。

而直接使用 <nuxt/> 虽然页面内容效果一样，但JS却无法执行。

单页面应用部署

设置nuxt.config.js：

mode: 'spa'

执行打包命令：

npm run build

这时候会自动生成dist文件夹目录，部署到服务器上即可。

便宜好用的国外VPS推荐