Vue预渲染prerender-spa-plugin+vue-meta-info

前言：
公司现有一个新需求需要在原有的vue2项目上面进行预渲染，进行SEO的优化，在网上进行了一系列的搜索，发现两种简单易上手的方案（1.使用prerender-spa-plugin+vue-meta-info进行打包构建；2.使用nuxt.js在开发过程中就渲染呈现出来）
因是在原有项目基础上进行，所以采用第一种方案进行构建渲染，话不多说，直接上代码！！！
一、prerender-spa-plugin插件使用
1.安装

1. //npm
2. npm install prerender-spa-plugin --save
3. //yarn
4. yarn add prerender-spa-plugin --dev

复制代码

2.找到build文件下webpack.prod.conf.js 在页面中添加代码

1. // 预渲染
2. const PrerenderSPAPlugin = require('prerender-spa-plugin')
3. const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
7. plugins: [
9.     // 预渲染
10.     new PrerenderSPAPlugin({
11.       // 生成文件的路径，也可以与webpakc打包的一致。
12.       // 下面这句话非常重要！！！
13.       // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
14.       staticDir: path.join(__dirname, '../dist'),
15. // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
16.       routes: ['/', '/index'],
17. // 这个很重要，如果没有配置这段，也不会进行预编译
18.       renderer: new Renderer({
19.         inject: {
20.           foo: 'bar'
21.         },
22.         // headless: false,
23.         // renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
24.         // args: ['--no-sandbox', '--disable-setuid-sandbox']
25.         navigateOptions:{
26.           timeout: 0,
27.         }
28.       })
29. ]

复制代码

3.在main.js里面添加mounted newEvent('document')     document名字必须与第二步中的名字对呀

1.   // 添加mounted，不然不会执行预编译
2.   mounted () {
3.     document.dispatchEvent(new Event('render-event'))
4.   }

复制代码

4.router.js中一定要设置history模式

 5.npm run build
打包之后可以看到配置好的路由生成了相应的html页面

 二、vue-meta-info使用
1.插件安装

1. npm install vue-meta-info --save

复制代码

2.main.js引用

1. import MetaInfo from 'vue-meta-info'
2. // 注册
3. Vue.use(MetaInfo)

复制代码

3.页面上使用
　　3.1-直接在页面上使用

1. //单个页面配置
2. <template>
3.     首页
4. </template>
5. export default {
6.     name:'首页'
7.     metaInfo:{
8.         title:'首页',
9.         meta:[
10.             {
11.                 name: 'keyWords',
12.                 content:'关键字'
13.             },
14.             {
15.                 name:'description',
16.                 content:'描述'
17.             }
18.         ]
19.     }
20. }
21. //多页面配置
22. <template>
23.     首页
24. </template>
25. export default {
26.     name:'index'
27.     metaInfo():{
28.         return{
29.             meta:this.metaData
30.         }
31.     },
32.     data(){
33.         return{
34.             metaData:''
35.         }
36.     },
37.     watch:{
38.         $route(to,form){
39.         //通过跳转页面配置每个页面的关键字和描述，这只是个例子
40.         //注意如果通过to.path去判断 需要进行兼容判断 因为渲染后的访问路径会在末尾自动添加/ 例如 loclhost:3000/index/,这个时候就需要 to.path === '/index' || to.path==='/index/'
41.             if(to.name === 'index'){
42.                 this.metaData=[
43.                     {
44.                         name: 'keyWords',
45.                         content:'关键字'
46.                     },
47.                     {
48.                         name:'description',
49.                         content:'描述'
50.                     }
51.                 ]
52.             }
53.             //当然也可以封装一个方法去返回每个页面的文案
54.             //this.metaData = metaSetFuc(to.name)
55.         }
56.     }
57. }

复制代码

　　3.2-新建一个js文件里面

1. export default {
2.   index: {
3.     title: 'title',
4.     meta: [
5.       {
6.         name: 'keywords',
7.         content: ''
8.       },
9.       {
10.         name: 'description',
11.         content: ''
12.       }
13.     ]
14.   },
15. }

复制代码

然后再页面上面去引用

1. //导入存放的文件路径
2. import VueMetaInfo from '../assets/vue-meta-info.js'
3. export default {
4.   metaInfo: VueMetaInfo.index,
5. }

复制代码

三、在使用中遇到的问题
1.[prerender-spa-plugin] Unable to prerender all routes! 错误
在node_modules -> @prerender -> renderer-puppeteer -> es6 -> renderer.js(113行)

1. await page.goto(`${baseURL}${route}`, navigationOptions);
2. //修改为
3. await page.goto(`${baseURL}${route}`, {...navigationOptions, timeout: 0});

复制代码

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！