需求出发点:
项目需要做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> 了