1 vue-cli-plugin-prerender-spa
使用方法：
vue add prerender-spa
在安装的过程中会需要安装一个chrome，网速不好可能导致不能下载，导致安装失败，可以取消chrome的安装，然后手动下载放在指定的目录下；
安装过程中选择需要预渲染的route
安装成功：
自动在main.js中加入：
2 使用prerender-spa-plugin插件
cnpm i prerender-spa-plugin --save-dev
vue-cli2.0 在build/webpack.prod.conf.js中：
const prerenderspaplugin = require('prerender-spa-plugin')
const renderer = prerenderspaplugin.puppeteerrenderer
注册插件：
在plugins中加入：
|
1
2
3
4
5
6
7
8
9
10
11
|
new prerenderspaplugin({ staticdir: path.join(__dirname, '../dist'),//打包文件的路径，或者自定义一个文件路径 routes: ['/test', '/'],//需要预渲染的route路径 renderer: new renderer({ inject: { foo: 'bar' }, headless: true, renderafterdocumentevent: 'render-event'//需要在实例化vue中监听的事件，名称要相对应 }) }) |
vue-cli3.0
在vue.config.js
|
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
|
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: ['/', '/product','/about'], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchevent(new event('render-event'))，两者的事件名称要对应上。 renderafterdocumentevent: 'render-event' }) }), ], }; }} |
在main.js中加入：
|
1
2
3
4
5
6
7
8
9
10
|
new vue({ el: '#app', router, components: { app }, template: '<app/>', mounted() { // you'll need this for renderafterdocumentevent. document.dispatchevent(new event('render-event')) }}) |
以上这篇vue-cli单页面预渲染seo-prerender-spa-plugin操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://www.cnblogs.com/xiaofenguo/p/13180792.html
