vue2.0+prerender的SEO优化

在 Vue 2.0 中进行 SEO 优化时，结合 Prerender 技术可以显著提升页面的搜索引擎友好性

1.安装pnpm

pnpm比npm安装速度快很多，我们使用pnpm来安装依赖

npm install -g pnpm@6.0.0

2.使用pnpm安装prerender

pnpm add prerender-spa-plugin --save-dev

3.修改vue.js文件

Vue.js 项目中使用 PrerenderSPAPlugin 插件来实现静态页面的预渲染，PrerenderSPAPlugin 是一个用于 Vue.js 和其他单页应用（SPA）的 Webpack 插件，它可以在构建过程中生成指定路由的静态 HTML 文件。

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');

    configureWebpack: {
        plugins: [
            new PrerenderSPAPlugin({
                staticDir: path.join(__dirname, 'dist'),
                routes: [
                    '/',
                    '/gptDesign',
                    '/assisted',
               
                ],
                renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
                    renderAfterTime: 5000
                })
            })
        ]
    }

4.运行

此时，若是报错after emitting PrerenderSPAPluginError: Chromium revision is not downloaded. Run "npm install" or "yarn install"，可以看这篇文章手动下载Chromium文件

最后，将项目打包部署之后，使用网站测试就可以搜索到相关页面啦，就是使用之后，每次项目的运行速度会慢很多。