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

Posted 2023-04-13 jimojianghu

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

Nuxtjs简单介绍

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

使用Nuxtjs

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

创建一个新的Nuxtjs项目：

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

创建好新的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、dist\\client、dist\\server
• npm run generate
  • 如果设置配置文件 target: \'static\', 则只会生成根目录下的 dist 目录，包含所有静态资源
  • 如果配置文件没设置 target, 则除了会生成根目录下的 .nuxt 目录(包含 dist、dist\\client、dist\\server)，还生成根目录下的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文件夹目录，部署到服务器上即可。

NuxtJS处理因css在服务端渲染而增加源代码量，从而影响到SEO的问题

　　关于Nuxt的css嵌入到html代码中的问题，效果如下：

　　解决方案其实很简单：在nuxt.config.js文件中的build对象添加extractCSS: { allChunks: true }，extractCSS是将内嵌的css提取到外部，allChunks代表所有的都执行，代码如下：

build: {
    extractCSS: { allChunks: true }
}

　　保存后，再次查看网页源代码发现就没有内嵌css了，而是2个css文件。

　　并且网页所用到的css都会合并成两个文件，一个公共的未加scoped的，一个是加了scoped的。

VUE提取 CSS 到单个文件

　　vue官网也提供了提取 CSS 到单个文件的方法

1、安装插件：npm install extract-text-webpack-plugin --save-dev

2、使用

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\\.vue$/,
        loader: \'vue-loader\',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

　　上述内容将自动处理 *.vue 文件内的 <style> 提取，并与大多数预处理器一样开箱即用。

　　注意这只是提取 *.vue 文件 - 但在 JavaScript 中导入的 CSS 仍然需要单独配置。

3、手动配置：将所有 Vue 组件中的所有已处理的 CSS 提取为单个 CSS 文件配置示例

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\\.vue$/,
        loader: \'vue-loader\',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: \'css-loader\',
              fallback: \'vue-style-loader\' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}