Vue 预渲染之 prerender-spa-plugin 的配置使用
我们在使用 vue-cli
脚手架开发 vue 项目时,打包后的文件是一个单页面应用,只能使用浏览器渲染,由于这种方式无法解决seo优化问题,下面我们可以借助 prerender-spa-plugin
和 vue-meta-info
来满足我们的 SEO 的需求 。
# 安装 prerender-spa-plugin 及配置
npm install prerender-spa-plugin --save
1
然后在 webpack.prod.conf.js
里面添加:
// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
1
2
3
2
3
在 webpack.prod.conf.js
中的 plugins
里面添加:
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
routes: ['/', '/a', '/b', '/c'],
// 预渲染代理接口
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'
})
})
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
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
最后在 main.js
里面修改:
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
// 添加mounted,不然不会执行预编译
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
到这里预编译的配置修改就完成了,下面配置 title 和 meta。
npm install vue-meta-info --save # 安装 vue-meta-info
1
在 main.js 引入:
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
1
2
2
在 vue 组件页面中这样配置:
<script>
export default {
// 配置title和meta数据
metaInfo: {
title: '我是一个title',
meta: [
{
name: 'keywords',
content: '关键字1,关键字2,关键字3'
},
{
name: 'description',
content: '这是一段网页的描述'
}
]
},
data () {
return {}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
到这里 prerender-spa-plugin
与 vue-meta-info
就全部完成了。
注意
使用预渲染 vue-router
必须使用 history
模式。
# 参考文档
- 1、prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plugin (opens new window)
- 2、vue-meta-info参考文档:https://www.npmjs.com/package/vue-meta-info (opens new window)
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13