如何在 Vue-cli3.0 中使用 prerender-spa-plugin 进行预渲染
关于 Vue 的 SPA 说的已经太多太多了,它为我们带来了极速的开发体验,极强的开发效率。可能唯一有些许不足的就是,当我们对 SEO 很在乎的时候,我们如何去处理 SEO 的需求呢?话不多述,直接上代码。
# 1、安装 prerender-spa-plugin
npm install prerender-spa-plugin --save
1
# 2、在 vue-config.js 中添加如下代码
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
routes: ['/mytest', '/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
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
# 3、在main.js中增加
new Vue({
router,
store,
render: h => h(App),
// 添加mounted,不然不会执行预编译
mounted () {
document.dispatchEvent(new Event(‘render-event’))
}
}).$mount("#app");
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 4、在 router.js 中使用history模式
const router = new VueRouter({
routes,
mode: 'history'
})
1
2
3
4
2
3
4
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13