vue项目seo优化-预渲染prerender-spa-plugin配置

---

前言

Vue是SPA单页面应用对SEO不太友好，如果你只是需要对少数页面需要做SEO处理（例如 / 首页，/关于我们 等页面），可以使用预渲染 prerender-spa-plugin (插件)

---

一、prerender-spa-plugin是什么？

预渲染 prerender-spa-plugin会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)。
是解决Vue的SEO优化的解决方法之一。

1.优点

设置预渲染简单, 开发成本低，对代码的改动小，代码侵入性更低。

2.缺点

只适合于针对少数页面进行SEO的情况, 如果需要对几百上千的页面进行SEO优化, 就不推荐了 (会打包很慢）

二、使用步骤

1.安装 prerender-spa-plugin

npm install prerender-spa-plugin --save
or
yarn add prerender-spa-plugin
1
2
3

2.配置 prerender-spa-plugin

1）vue.config.js 配置

// vue.config.js

const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

function resolve(dir) {
	return path.join(__dirname, dir);
};

// 修改资源打包路径
module.exports = {
	publicPath: '/', //资源路径，预渲染需要history模式，所以这块要改成'/'或者对应的（二级）路径,不能'./'
	
	configureWebpack:() => {
		if (process.env.NODE_ENV !== 'production') {
			return {};
        }else{
			plugins: [
				new PrerenderSPAPlugin({
					staticDir: resolve('dist'),// 读取vue-cli已打包文件的根目录 prerender-spa-plugin会在这里开启一个服务
					routes: ['/','/about' ],// 需要预渲染的路由
					minify: {
						minifyCSS: true, // css压缩
						removeComments: true // 移除注释
					},
					renderer: new Renderer({
						inject: {
							foo: 'bar'
						},
						// 渲染时显示浏览器窗口，调试时有用
						headless: false,
						renderAfterTime: 5000,
						// 等待触发目标时间后，开始预渲染
						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
31
32
33
34
35
36
37
38
39
40

2）路由的index.js 配置

// router.js
mode:‘history’,//修改vue.config.js 中PublicPath: ‘/’ ；不然会导致刷新页面路径错乱导致样式或者js丢失
1
2

3）main.js 配置

// main.js
new Vue({
	  el: '#app',
	  router,
	  store,
	  render: h => h(App),
	  // 预渲染
	  mounted () {
	    	document.dispatchEvent(new Event('render-event'))
	  }
})
1
2
3
4
5
6
7
8
9
10
11

---

总结，非根目录构建

以上是部署在根目录的预渲染配置，如果部署在二级目录（非根目录）中的，如构建后的 index.html 需放在 /xxx/路径下的情况，会出现打包很久无法成功也不报错，需要对配置做些变更，前往文章查看