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设置代理
