首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

vuejs 预渲染插件 prerender-spa-plugin 生成多页面 -- SEO

Sonder
2021-03-10
2682字
7分钟
浏览 (3.7k)

前端vue等框架打包的项目一般为SPA应用,而单页面是不利于SEO的,现在的解决方案有两种:

1、SSR服务器渲染
了解服务器渲染请进,这里不做记录。

2、预渲染模式
这比服务端渲染要简单很多,而且可以配合 vue-meta-info 来生成title和meta标签,基本可以满足SEO的需求
TIPS: 使用预渲染vue-router必须使用history模式

复制代码
// 安装
npm install prerender-spa-plugin --save

然后在webpack.prod.conf.js里面添加:

复制代码
// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

在plugins里面添加:

复制代码
new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。
 // 下面这句话非常重要!!!
 // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
 staticDir: path.join(__dirname, '../dist'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
 routes: ['/', '/a', '/b', '/c', '/d'], // 预渲染代理接口
server: {
   proxy: { '/api': {
       target: 'http://localhost:9018',
       secure: false }
   }
 }, // 这个很重要,如果没有配置这段,也不会进行预编译
 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,
 components: { App },
 template: '<App/>', // 添加mounted,不然不会执行预编译
mounted () {
   document.dispatchEvent(new Event('render-event'))
 }
})

到这里预编译的配置修改就完成了,执行 npm run build 查看打包后的dist文件就会发现如下结构:

安装 vue-meta-info 配置title和meta:

复制代码
npm install vue-meta-info --save

在main.js引入:

复制代码
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)

在vue页面中配置:

复制代码
<script> export default { // 配置title和meta数据
metaInfo: {
   title: '我是一个title',
   meta: [
     {
       name: 'keywords',
       content: '关键字1,关键字2,关键字3' },
     {
       name: 'description',
       content: '这是一段网页的描述' }
   ]
 },
 data () { return {}
 }
} </script>

到这里 prerender-spa-pluginvue-meta-info 就全部完成了

metaInfo简写

复制代码
export default {
 first: {
   title: '我是一个title[first]',
   meta: [
     {
       name: 'keywords',
       content: '关键字1,关键字1,关键字1'
     },
     {
       name: 'description',
       content: '这是一段网页的描述1'
     }
   ]
 },
 second: {
   title: '我是一个title[second]',
   meta: [
     {
       name: 'keywords',
       content: '关键字2,关键字2,关键字2'
     },
     {
       name: 'description',
       content: '这是一段网页的描述2'
     }
   ]
 },
 third: {
   title: '我是一个title[third]',
   meta: [
     {
       name: 'keywords',
       content: '关键字3,关键字3,关键字3'
     },
     {
       name: 'description',
       content: '这是一段网页的描述3'
     }
   ]
 }
}
复制代码
import VueMetaInfo from '../assets/vue-meta-info.js'

metaInfo: VueMetaInfo.first,

本文转自 https://www.cnblogs.com/kdcg/p/9606302.html,如有侵权,请联系删除。

下一篇 / 不可思议的纯CSS导航栏下划线跟随效果

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)