Vue解决SEO的方案

• 多页面 ===> 蜘蛛爬取
• 页面含有蜘蛛抓取的内容
• title、描述、关键词

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: '......' }] } },

// package.json "prerender-spa-plugin": "^3.4.0", "puppeteer": "^14.0.0", // main.js mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app') // router mode: 'history' // vue.congig.js const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer new PrerenderSPAPlugin({ // Required - The path to the webpack-outputted app to prerender. staticDir: path.join(__dirname, 'dist'), // Required - Routes to render. routes: [ '/', '/index', '/info/list' ], Renderer: new Renderer({ foo: 'bar', // headless: false, renderAfterDocumentEvent: 'render-event' }) }) 

使用开箱即用的NuxtJs

存在的问题

• 起了2个服务[一个是nodeJs服务, 另一个是后台Java等后端语言的服务]

适合什么项目

• 一个项目可能所有页面都需要做SEO

NuxtJs项目上线流程

• npm run build
• 将打包完成的文件拷贝出来(nuxt.config.js, .nuxt, package.json, static)
• 将四个文件拷贝到服务器上, 服务器上安装node环境npm install
• 运行npm run start
• nginx设置代理

原文链接：https://blog.csdn.net/szr190/article/details/132493475?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836734316800185847717%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836734316800185847717&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-8-132493475-null-null.nonecase&utm_term=%E7%BD%91%E7%AB%99%E3%80%81seo