spa项目使用插件做预渲染

需求出发点：
项目需要做SEO优化

当前情况：
项目是vue-cli搭建的spa(单页面渲染应用)，即页面查看源代码只有<div id="app"></div>
spa对SEO搜索引擎爬取非常不友好，因此需要用到预渲染，将需要做SEO的重点页面进行预渲染

使用工具：
prerender-spa-plugin

使用方式：

npm i prerender-spa-plugin -D

vue.config.js中添加

const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
	...
	configureWebpack: {
		plugins: [
      		new PrerenderSPAPlugin({
        		// Required - The path to the webpack-outputted app to prerender.
        		staticDir: path.join(__dirname, 'dist'),
        		// Required - Routes to render.
        		routes: [ '/' ],
      		})
    	]
	}
}

3. 执行 npm install，重新安装依赖（这一步可视情况，我这里执行完前两步之后，run serve的时候某个依赖包中报错了，可能是node版本的修改原因，也可能是和安装的插件有版本不兼容的问题，如果本地执行完前两步，起服务的时候报错，可以尝试使用此步）

执行完整个流程之后，直接npm run build进行打包。测试的话，可以放到本地nginx上进行测试。

页面使用快捷键 ctrl+U查看源代码，已经是预渲染后的页面，页面中不只有一个简单的 <div id="app"></div> 了

原文链接：https://blog.csdn.net/Yana1225/article/details/126272253