乐趣区

Vue现有项目改造为Nuxt项目

jiezi

公司项目，最初只为了实现前后端分离式开发，直接选择了 vue 框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做 SEO 优化。

本人第一次接触 SEO 的优化，完全是零基础，开启了小白菜的 SEO 探索之旅，记录一下一路的过程，方便自己回顾与大家的探讨，如有不度之处，还请路过的大神指导一下。

常用 SEO 优化方式

在查阅了一些资料后，常见的 SEO 优化有以下两种：

  • prerender-spa-plugin 客户端预渲染
  • ssr 服务端渲染

在选择预渲染模式还是服务端渲染的模式时，简单做了个 demo 进行了一下测试，由于公司项目以检索为主的产品，后期需要蜘蛛抓取的界面太庞大，最终选择用 vue 提供的 nuxt.js 框架去改造现有的项目。

简单写一下 prerender-spa-plugin 客户端预渲染的过程

prerender-spa-plugin 客户端预渲染

相关文档可查看：prerender-spa-plugin

安装

直接在 vue 项目中，通过 npm 或者 yarn 进行安装
##### Yarn
$ yarn add prerender-spa-plugin
##### NPM
$ npm i prerender-spa-plugin -S

配置

##### 在 webpack.prod.js 中配置
顶部引入：```
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
```
在 plugins 中配置
```
new PrerenderSPAPlugin({
    // 生成的预渲染 html 文件存放路径
    staticDir: path.join(__dirname, '../dist'),
    // 需要预渲染的界面路径（router）routes: ['/', '/index'],
    // 跨域转发配置, 预渲染时获取数据的 api 地址
    server: {
        proxy: {
          '/api': {
            target: 'http://192.168.1.223:9002',
            changeOrigin: true,
            pathRewrite: {'^/api': '/'}
          }
        }
     },
    // 在一定时间后再捕获页面信息，使得页面数据信息加载完成，必选，不然界面依然会没有数据
    captureAfterTime: 5000,
    // 忽略打包错误
    maxAttempts: 10,
    renderer: new Renderer({
        // 可选，页面在被搜索时的关键词
        inject: {foo: 'bar'},
        // 可选，无桌面系统可去掉
        headless: false,
        // 必选，‘render-event' 必须与 main.js 中 mounted 下的配置名称一致
        renderAfterDocumentEvent: 'render-event'
    })
})
```

##### 在 main.js 中的配置
```
new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    mounted () {document.dispatchEvent(new Event('render-event'))
    }
})
```

##### config 下 index.js 配置
//build 时需要将 '/' 切换为 './'
assetsPublicPath: './'

到此整个预渲染模式，改造完成了。
此次 demo 中尚未处理 meta 信息，需要配置 meta 信息的，可查看文档 vue-meta-info, 这是一个基于 vue 2.0 的插件，它会让你更好的管理你的 vue 页面里面的 meta 信息，详细配置过程可参考：muwoo 作者写的“处理 Vue 单页面 Meta SEO 的另一种思路”文章，里边整个过程写的挺详细的

Nuxt.js 框架改造现有 Vue 项目

作为新手，并不介意自己动手去配置环境，建议直接用 nuxt.js 提供的脚手架 (create-nuxt-app) 进行快速搭建项目，具体搭建过程可查看官网文档：Nuxt.js

nuxt.js 项目搭建

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

$ npx create-nuxt-app < 项目名 >

或者

$ yarn create nuxt-app < 项目名 >

之后会有一系列的选项：

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

    • None (Nuxt 默认服务器)
    • Express
    • Koa
    • Hapi
    • Feathers
    • Micro
    • Adonis (WIP)

  2. 选择您喜欢的 UI 框架:

    • None (无)
    • Bootstrap
    • Vuetify
    • Bulma
    • Tailwind
    • Element UI
    • Ant Design Vue
    • Buefy
  3. 选择你想要的 Nuxt 模式 (Universal or SPA), 不懂此选项的可以看一下这篇文章 render mode 的区别
  4. 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
  5. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
  6. 添加 Prettier 以在保存时格式化 / 美化您的代码。

官网都有详细的讲解，根据自己的需求选择就好了，当安装完后，项目就可以直接运行了

npm run dev

* 问题

在启动时遇到如下问题：

找了一圈，发现搭建项目时默认的 element-ui 版本太低，直接用 npm uninstall element-ui 卸载当前版本，重新使用 npm install element-ui@版本号 安装即可，版本号使用 2.7.2 及以上均可

项目目录简介

既然是对现有 Vue 项目的改造，就先看一下 nuxt.js 各目录的功能及 vue 项目目录的对比吧

nuxt.js 的目录结构

├── assets                         // 资源文件。用于组织未编译的静态资源入 LESS、SASS 或 JavaScript
│   └── logo.jpg                   // 默认 logo 图片
├── components                     // 组件。用于自己编写的 Vue 组件，比如滚动组件，日历组件，分页组件
│   └── AppLogo.vue                // 默认 logo 组件
├── layouts                        // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。│   └── default.vue                // 默认模板页面，类似 mvc 中的 layout
├── middleware                     // 中间件。存放中间件。可以在页面中调用：middleware: 'middlewareName'。├── pages                         // 页面。一个 vue 文件即为一个页面。│   └── index.vue                  // 默认首页面
├── plugins                        // 用于存放 JavaScript 插件的地方
│   └── element-ui.js              // 上边我们安装的 UI 框架
├── static                         // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。├── store                         // 用于组织应用的 Vuex 状态管理。├── .editorconfig                  // 开发工具格式配置
├── .eslintrc.js                   // ESLint 的配置文件，用于检查代码格式
├── .gitignore                     // 配置 git 不上传的文件
├── nuxt.config.js                 // 用于组织 Nuxt.js 应用的个性化配置，比如网站 title，已便覆盖默认配置
├── package.json                   // npm 包管理配置文件
└── README.md                      // 说明文档

nuxt.js 目录与 vue.js 目录的对比

整体来看，目录结构没有太大的变动，区别比较大的就是 router 文件夹，nuxt.js 项目中并没有 router 路由的配置，这个就是 nuxt 框架的独到之处，为了能实现更好的 SSR 渲染，它使用的是根据页面结构，自动路由，所以你的文件名，就是你的路由名称，具体规则可查看官网文档路由。

好了，nuxt 项目启动了，目录结构也清楚了，接下来就是整个现有 Vue 项目的迁移了

PS：目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新 vue 项目的改造过程及分享改造过程中遇到的问题

退出移动版