网上很多都是关于prerender-spa-plugin插件的介绍，但是听说这个插件官方很久没维护了，本地安装时也出现了很多问题，经过一番查找，发现了prerender-spa-plugin-next插件，测试发现，这个插件在vuecli5中完美使用，在vuecli4中使用会报错。

安装 prerender-spa-plugin-next

npm i prerender-spa-plugin-next -D

vue.config.js中配置：

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

// 预渲染
const PrerenderSPAPlugin = require('prerender-spa-plugin-next');

module.exports = defineConfig({
  transpileDependencies: true,
  // prerender-spa-plugin-next预渲染
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // 需要预渲染的页面，跟router路由一致
        routes: [ '/', '/about' ],
      })
    ]
  }

})

可以给每个预渲染的页面设置title，meta和link信息，详见：vue2中seo时使用vue-meta-info_李疆~的博客-CSDN博客假设你要给users.vue添加title，meta标签。main.js里面引入vue-meta-info。安装vue-meta-info。这样在组件页面中就可以使用了。https://blog.csdn.net/qq_40323256/article/details/127605922

vite中使用这个预渲染插件（vite-plugin-prerender）感觉效果也不错，推荐一波： 

了解Vue3预渲染_vue3 预渲染_前端咸鱼翻身的博客-CSDN博客预渲染可以显著改善网站的性能，本文将介绍什么是预渲染，以及如何使用Vue插件在网站中应用它_vue3 预渲染https://blog.csdn.net/m0_55119483/article/details/130950623