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: '这是标题这是标题这是标题', meta: [{ name: 'keyWords', content: '我是contact关键字我是contact关键字我是contact关键字我是contact关键字' }, { name: 'description', content: '这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述' }], }, 再vue.config.vue中配置 plugins插件 里面有一个toutes 根据自己需要seo的组件，往里面添加
const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpack = require('webpack') const path = require('path') module.exports = { lintOnSave: false , publicPath: process.env.NODE_ENV === 'production' ? './' : '/', configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return return { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/login', '/home'], renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, renderAfterDocumentEvent: 'render-event' }) }) ] } }, } vue实例中添加我这里面的mounted new Vue({ store, router, render: h => h(App), created(){ store.commit("addMenu", router); }, mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app') 上面配置好后执行打包指令 npm run build
在dist文件夹里，能看到你添加的路由组件名字，从这文件的html文件进去有你配置的title且有很多页面的标签就成功了
2.ssr服务器渲染
使用nuxt，这是一个基于vue开发的前端框架
针对项目每个页面都进行seo,标题和内容可以用nuxt服务器生命钩子进行动态渲染
这个我没用过，不过多描述
原文链接：https://blog.csdn.net/weixin_56654424/article/details/123845373?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169114700016800211528415%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=169114700016800211528415&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-5-123845373-null-null.268%5Ev1%5Ekoosearch&utm_term=seo%E4%BC%98%E5%8C%96
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/22698
