vue SEO 预渲染 vue-cli3.x plugin-prerender-spa

最新推荐文章于 2025-04-07 11:20:13 发布

youyou_builder

最新推荐文章于 2025-04-07 11:20:13 发布

阅读量1.6k

点赞数

本文链接：https://blog.youkuaiyun.com/youyouyouyou44/article/details/93143307

版权

Vue.js应用由于其动态加载特性，在SEO方面存在挑战。本文记录了使用prerender-spa-plugin进行预渲染的流程，包括通过vue add prerender-spa命令自动安装，及遇到的打包事件处理问题和解决办法，如检查路由、重新安装或使用镜像安装。参考链接提供了更多帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue做的页面不利于seo，有两种方法能解决这个问题：vue add prerender-spa和ssr
这里我用的是prerender-spa-plugin，记录一下具体流程和报错：

全自动安装代码

vue add prerender-spa

运行这个以后需要回答一个问题，下面一一列出来：

? Which routes to pre-render? (list them separated by a comma) /,/about,/contact
/,/about,/contact是你要预渲染的router
你可以按自己的写，要什么界面变成静态的就写哪个界面的路由，逗号隔开。

? Use a render event to trigger the snapshot? Yes
? Use a headless browser to render the application? (recommended) Yes
? Only use prerendering for production builds? (recommended) Yes
上面三个都可以写yes

运行结束以后在你的vue.config.js文件中会多一段代码：

pluginOptions: {
   prerenderSpa: {
     registry: undefined,
     renderRoutes: [
       '/',
       '/about',
       '/contact',
     ],
     useRenderEvent: true,
     headless: true,
     onlyProduction: true
   }
 }