Nuxt项目总结

SEO

为了使我们的站点更容易被搜索到，或者说在搜索引擎的排名中靠前，那就需要能让爬虫尽可能多的爬到我们的页面，那就需要对站点进行搜索引擎优化，也就是我们所说的SEO

爬虫原理

简单过程：爬取url -> 解析html内容 -> 对内容进行检测 -> 将符合收录规则的网页存储下来

该网页将会出现在与网页内容相关的查询的搜索结果中。

收录方式：

1. 主动发现并抓取

2.每个搜索引擎都有提供链接提交的工具，通过主动推送功能将我们站点的网页收录到爬虫中

方案决定

基于vue项目seo，主要有以下几种方式：

1. 预渲染（prerender-spa-plugin）：构建时对指定路由生成静态页面

        优点：改动小，只需引入插件，增加配置

        缺点：无法使用动态路由；页面数量达到上百后，打包极慢

2. 基于Nuxt的静态化部署：利用generate实现静态化打包，支持动态路由（少量参数值）

        优点：访问速度快；无服务器负载压力

        缺点：动态路由参数多时不适用

3. 基于Nuxt的SSR：服务端渲染技术

        优点：更好的SEO；支持动态路由；功能强大齐全

        缺点：开发条件限制，一些系统对象的获取的局限（document, window），外部扩展库可能需要兼容

                环境和部署要求更高；

                高流量下需要考虑负载均衡，采用缓存策略

综合考虑，决定使用nuxt.js

初见Nuxt.js

1. 安装和创建

npx create-nuxt-app <项目名>
cd <项目名>
npm run dev

2. 目录结构

pages：用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

static：用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下

3. 布局

默认布局

可通过添加layouts/default.vue 文件来扩展应用的默认布局

<template>
  <nuxt />
</template>

类似于vue的</router-view>

自定义布局

<!-- layouts/blog.vue -->
<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt />
  </div>
</template>

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>

4. 动态路由

基础路由

动态路由

 

5. 插件

创建i18n插件

plugins/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import jpLocale from 'element-ui/lib/locale/lang/ja'
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)
export default ({ app, store }) => {
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      en: { ...require('~/locales/EnUs.json'), ...enLocale },
      jp: { ...require('~/locales/JaJp.json'), ...jpLocale }
    }
  })

  ElementLocale.i18n((key, value) => app.i18n.t(key, value))
}

全局引入插件

nuxt.config.js

plugins: [
    '@/plugins/i18n.js'
]

server端引用

context.app.i18n.t('key')

client端引用

this.$t('key')

6. 异步数据

asyncData在服务端或路由更新之前被调用

一般情况下，我们会用asyncData来调用接口获取数据，Nuxt.js 会将 asyncData返回的数据融合组件data方法返回的数据一并返回给当前组件（支持promise）

Nuxt.config.js配置相关

统一设置head

head: {
    title: 'xxx',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content:
          'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }

设置全局样式

css: [
    'element-ui/lib/theme-chalk/index.css',
    { src: '@/styles/theme/index.scss', lang: 'scss' }
]

设置publicPath

build: {
    publicPath: cdnSettings[process.env.BUILD_ENV || 'development'].publicPath,
},

publicPath基本标准：<CDN域名>/<项目名> 

上线前准备

安装&配置pm2

pm2是一个进程管理工具,可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能

安装pm2

npm install pm2 --save

在根目录配置文件ecosystem.config.js

module.exports = {
  apps: [
    {
      name: 'camdatas_web',
      exec_mode: 'cluster',
      instances: 'max',
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start',
      env_dev: {
        BUILD_ENV: 'development'
      },
      env_test: {
        BUILD_ENV: 'test'
      },
      env_pre: {
        BUILD_ENV: 'pre'
      },
      env_pro: {
        BUILD_ENV: 'production'
      }
    }
  ]
}

申请机器、域名

jenkins shell脚本

package.json

"build:pro": "cross-env BUILD_ENV=production nuxt build",

执行命令

打包命令：npm run build:pro

启动命令：pm2 start ./ecosystem.config.js --interpreter babel-node --env pro

注：打包完成后会在.nuxt中新增dist文件夹，需要将.nuxt, static, nuxt.config.js, package.json, package-lock.json上传到服务器

遇到的问题

1. 在server端需要获取当前域名来做业务的区分，理论上拿到的都是类似www.xxx.com这种

context.req.headers.host

发布到服务器上之后，发现获取到的都是127.0.0.1，无法实现业务需求。

处理方式：

经和运维沟通，发现原因是他们在代理的nginx将真实的host等信息隐藏了。因此需要修改nginx配置将真实的请求信息暴露出来

proxy_set_header  Host  $host;
proxy_set_header  X-real-ip $remote_addr;
proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

2. nuxt.config.js中有别的文件依赖，启动时报错

如上面所写，打包完成后上传的几个文件中不包含所依赖的文件，所以我们需要在打包时一并把server端依赖的文件一起上传到服务器上

利用nuxt的钩子来完成这件事：

hooks: {
    build: {
      done() {
        const des = './dist'
        fse.emptyDirSync(des)
        fse.copySync('./.nuxt', `${des}/.nuxt`)
        fse.copySync('./config', `${des}/config`)
        fse.copySync('./static', `${des}/static`)
        fse.copySync('./cdn-settings.js', `${des}/cdn-settings.js`)
        fse.copySync('./nuxt.config.js', `${des}/nuxt.config.js`)
        fse.copySync('./package.json', `${des}/package.json`)
        fse.copySync('./ecosystem.config.js', `${des}/ecosystem.config.js`)
      }
    }
  }

3. 发布到服务器后，静态资源无法访问

原因：nuxt项目的静态资源路径为.nuxt/dist/client，需要修改jenkins中上传静态资源的路径

https://www.nuxtjs.cn/guides/context.svghttps://www.nuxtjs.cn/guides/context.svg