Vue解决SEO的方案

Vue解决SEO的方案
1、最基本的条件
多页面 ===> 蜘蛛爬取
页面含有蜘蛛抓取的内容
title、描述、关键词
2、解决方案1：预渲染
vue插件：prerender-spa-plugin
解决title、描述、关键词的插件：vue-meta-info
安装

$ npm install prerender-spa-plugin -S

$ npm install vue-meta-info -S
不适合
如果有很多详情页需要SEO, 预渲染就不适合了
动态的去改变title、描述、关键词也是无效的
存在的问题
预渲染无法配置动态路由, 比如：/list/:id, 这样是不行的
如果title描述关键词来自于接口的数据, 配置到meta-info上也是不行的
可能也会存在出现页面空白的情况
适合
项目某几个页面做SEO
配置

// vue.config.js

const PrerenderSPAPlugin = require(‘prerender-spa-plugin’);

​

configureWebpack: {

plugins: [

new PrerenderSPAPlugin({

staticDir: path.join(__dirname, ‘dist’),

routes: [

‘/’,

‘/member’,

‘/course’,

‘/loading’,

‘/agreement’

],

}),

],

},

// main.js

import Vue from ‘vue’

import MetaInfo from ‘vue-meta-info’

​

Vue.use(MetaInfo)

// vue页面中使用

metaInfo() {

return {

title: ‘…’,

meta: [{

name: ‘…’,

content: ‘…’

}]

}

},
3、解决方案2：服务端渲染
使用开箱即用的NuxtJs
存在的问题
起了2个服务[一个是nodeJs服务, 另一个是后台Java等后端语言的服务]
适合什么项目
一个项目可能所有页面都需要做SEO
NuxtJs项目上线流程
npm run build
将打包完成的文件拷贝出来(nuxt.config.js, .nuxt, package.json, static)
将四个文件拷贝到服务器上, 服务器上安装node环境npm install
运行npm run start
nginx设置代理