vue项目使用预渲染进行seo优化

vue进行seo优化的两个方法
1.预渲染***
针对项目其中几个页面的seo，标题不能通过接口数据动态渲染情况使用
使用以下两个插件进行预渲染seo优化：
npm install prerender-spa-plugin --save
npm install vue-meta-info --save

//main.js中引入

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

// 需要seo的.vue文件中与data平级配置title和meta数据

  metaInfo: {title: '这是标题这是标题这是标题', // set a titlemeta: [{             // set metaname: 'keyWords',content: '我是contact关键字我是contact关键字我是contact关键字我是contact关键字'},{name: 'description',content: '这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述'}],// link: [{ // set link//   rel: 'asstes',//   href: 'https://www.baidu.com/'// }]},

再vue.config.vue中配置 plugins插件里面有一个toutes 根据自己需要seo的组件，往里面添加

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// eslint-disable-next-line no-unused-vars
const webpack = require('webpack')
const path = require('path')module.exports = {lintOnSave: false ,//关闭eslint检查,publicPath: process.env.NODE_ENV === 'production' ? './' : '/',configureWebpack: config => {if (process.env.NODE_ENV !== 'production') returnreturn {plugins: [new PrerenderSPAPlugin({// 生成文件的路径，也可以与webpakc打包的一致。// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir: path.join(__dirname, 'dist'),// outputDir: path.join(__dirname, './'),// 对应自己的路由文件，比如a有参数，需要写成就 /a/param1。routes: ['/login',  '/home'],// 这个很重要，如果没有配置这段，也不会进行预编译renderer: new Renderer({inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值foo: 'bar'},headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机})})]}},
}

vue实例中添加我这里面的mounted

 new Vue({store,router,render: h => h(App),created(){store.commit("addMenu", router);},//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致/* 这句非常重要，否则预渲染将不会启动 */ mounted () {document.dispatchEvent(new Event('render-event'))}
}).$mount('#app')

上面配置好后执行打包指令 npm run build
在dist文件夹里，能看到你添加的路由组件名字，从这文件的html文件进去有你配置的title且有很多页面的标签就成功了

2.ssr服务器渲染
使用nuxt，这是一个基于vue开发的前端框架
针对项目每个页面都进行seo,标题和内容可以用nuxt服务器生命钩子进行动态渲染
这个我没用过，不过多描述

vue项目使用预渲染进行seo优化相关推荐

vue项目利用预渲染prerender-spa-plugin处理seo --viga
vue项目利用预渲染处理seo 写在前面什么是SEO? SEO是英文 Search Engine Optimization 的缩写,中文意思"搜索引擎优化".SEO是指在了解搜索 ...
vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
几个月前,公司要求(服务端渲染)--用vue-ssr做了个服务端渲染,从起搭建.开发.部署.浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习.--几个月过去了,公司又 ...
prerender ajax,Vue Prerender.io 预渲染seo优化
前言目前 Vue单页面应用在前端界混的风生水起,它的开发思想使得我们能真正做到前后端分离.解耦.单页面应用使用浏览器动态解析JS,呈现出最终的页面,用户体验比较好,网站性能也提高不少.但网络爬虫并不 ...
vue使用prerender预渲染配合vue-meta实现单页面实现SEO优化
公司项目在已在开发完成的情况下通知需要做SEO优化.因为项目使用的是vue做的单页面应用,顿时人都不好了,只好网上搜罗出来一些配置(其实是另一个带我的老大哥他做的,但是他要走了,工作交接给我, 我需要 ...
82.使用vue后怎么针对搜索引擎做SEO优化？
什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...
vue利用prerender-spa-plugin预渲染
前端时间写一个vue官网,开发很顺利,但是发布之后,发现对于SPA项目seo很不友好,于是用到预渲染进行优化,顺便利用vue-meta-info编写每个页面的name.content等等. 一.安装 ...
修改vue项目到服务器端渲染,现有vue-cli3搭建的vue项目改ssr服务器渲染
项目简介 vue+node+koa2 安装ssr依赖 npm install vue-server-renderer webpack-node-externals cross-env --save-d ...
【VUE项目实战】64、CND优化ElementUI以及首页内容定制
接上篇<63.指定打包入口及加载外部CDN资源> 上一篇我们为开发模式与发布模式制定不同的打包入口,然后为项目加载外部CDN资源.本篇我们来学习通过CND优化ElementUI的打包,以及 ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...

vue项目使用预渲染进行seo优化

vue项目使用预渲染进行seo优化

vue项目使用预渲染进行seo优化相关推荐

最新文章

热门文章

vue项目使用预渲染 进行seo优化

vue项目使用预渲染 进行seo优化

vue项目使用预渲染 进行seo优化相关推荐

最新文章

热门文章

vue项目使用预渲染进行seo优化

vue项目使用预渲染进行seo优化

vue项目使用预渲染进行seo优化相关推荐