vue对SEO很不友好，现在网上已经给出了四种解决方案，主要说预渲染prerender-spa-plugin咋用，其他的学习成本较大，项目如果对SEO要求很多，不如不使用vue写了
1.SSR服务器渲染：关于服务器渲染：Vue官网介绍，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。
2.静态化
静态化是Nuxt.js打包的另一种方式，算是 Nuxt.js 的一个创新点，页面加载速度很快。
在 Nuxt.js 执行 generate 静态化打包时，动态路由会被忽略。
3.使用Phantomjs针对爬虫做处理
Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。
4.预渲染prerender-spa-plugin
这种方法比前几种要简单许多，就是使用两个插件的事，但是如果很多路由的话编译要很久
如果你只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
npm install prerender-spa-plugin --save
vue cli 3 vue.config.js配置：
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
routes: ['/', '/product','/about'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
};
}
}
main.js加入
new Vue({
router,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
注意：router中必须设置 mode: “history
npm install vue-meta-info --save
main.js
import MetaInfo from "vue-meta-info"; //seo优化
Vue.use(MetaInfo);
vue文件中写入
export default {
name: "home",
metaInfo: {
title:
"标题",
meta: [
{
name: "keywords",
content:
"keywords"
},
{
name: "description",
content:
"description"
}
]
}
}
动态使用
这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式：
image
最后 npm run build ，打包出来可以看见文件，打包出文件夹/index.html，例如：about => about/index.html，里面有html内容。
网友评论