Vue项目的预渲染与页面元信息配置

测试环境

利用脚手架生成一个vue项目，需要选择 vue-router

# 安装 Vue Cli
cnpm install -g @vue/cli

$ vue --version
3.12.0

# 创建一个项目
vue create vue-demo

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

一、预渲染

1、安装插件

cnpm install prerender-spa-plugin --save

  

 

  
1
 

2、配置预渲染
vue.config.js 中增加,没有就在项目根目录新建一个

配置 里边的 routes 选项，说明需要预渲染的路由页面

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname,'dist'), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/', '/about'], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

3、在main.js中增加

new Vue({
  router,
  render: h => h(App), // 增加以下内容
  mounted () { document.dispatchEvent(new Event('render-event'))
  }

}).$mount('#app')


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

4、about.vue 文件写上固定文本

<template>
  <div class="about"> <h1>这是about</h1>
  </div>
</template>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

5、router.js路由文件设置
检查好路由信息配置about.vue

const routes = [
  { path: '/about', name: 'about', component: () => import('../views/About.vue')
  }
]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

router.js 中设置mode: “history”

const router = new VueRouter({
  mode: 'history',
  routes
})

  

 

  
1
  
2
  
3
  
4
 

6、编译

npm run build

  

 

  
1
 

查看生成的文件：
dist/about/index.html
可以看到已经有内容了

参考:
Vue 预渲染实现方案

二、设置meta元信息

基于上面的配置，继续

1、安装插件

cnpm install vue-meta-info --save-dev

  

 

  
1
 

2、设置main.js

import MetaInfo from 'vue-meta-info' 

Vue.use(MetaInfo)


  

 

  
1
  
2
  
3
  
4
 

3、配置meta信息

<template>
  <div class="about"> <h1>这是about</h1>
  </div>
</template>

<script>
export default {
  // 这些代码会转成网页的meta标签里的内容 metaInfo: { title: '关于我们', meta: [ { name: 'keywords', content: '关键字' }, { name: 'description', content: '网页描述' } ] }
}
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
 

4、编译查看，meta标签中已经有内容了

参考
vue预渲染

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/103076365