seo vue 动态路由_Vue项目SEO优化[预渲染方案]

Vue预渲染

获得服务端渲染的优点

对特定路由生成静态HTML文件，前端作为一个完全静态的站点

无需使用web服务器实时动态编译HTML

改善少数页面的SEO,可采用预渲染

若网站有成百上千条路线，预编译会非常缓慢(此情况慎用)

vue-meta-info插件，网页meta标签

安装：yarn add vue-meta-info

main.js中进行配置

import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

在xxx.vue文件里配置

export default {

// 这些代码会转成网页的meta标签里的内容

metaInfo: {

title: '标题',

meta: [

{

name: 'keywords',

content: '关键字'

},

{

name: 'description',

content: '网页描述'

}

]

}

预渲染核心：prerender-spa-plugin

安装：yarn add prerender-spa-plugin

build/webpack.prod.conf.js中进行配置

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

// plugins插件里书写

plugins: [

new PrerenderSPAPlugin({

// 生成文件的路径，这个目录只能有一级。若目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动

staticDir: path.join(__dirname, '../dist'),

// 对应自己的路由文件

routes: [ '/', '/home'],

// html文件压缩

minify: {

minifyCSS: true, // css压缩

removeComments: true // 移除注释

},

// 若没有这段则不会进行预编译

renderer: new Renderer({

inject: {

foo: 'bar'

},

headless: false,

// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。

renderAfterDocumentEvent: 'render-event'

})

}),

]

main.js中进行配置

new Vue({

el: '#app',

router,

store,

// components: { App },

// template: ''

render:h=>h(App),

mounted(){

document.dispatchEvent(new Event('render-event'))

}

})

注意：官方文档上 路由模式必须为 history 。如果不设置history模式，也能运行和生成文件，每个index.html文件的内容都会是一样的。所以必须使用 history模式