如何让已开发的Vue.js应用实现SEO友好？最简替代Nuxt方案

哥们，太懂你这种不想推翻重来又要搞定SEO的心情了！Nuxt的SSR确实能解决问题，但整套架构绑定感太强，没必要为了SEO把整个项目重构一遍。给你几个改动极小的方案，按“省事程度”排序：

1. 预渲染（Prerender SPA Plugin）—— 最适合小型应用 #

这应该是改动最小、成本最低的方案了，适合路由数量不多的场景（比如企业官网、小型博客）。原理是在项目构建阶段，把你指定的核心路由提前渲染成完整的静态HTML文件，这些HTML里已经包含了所有meta标签，搜索引擎爬的时候直接读静态内容就行，完全不用服务器实时渲染。

具体操作步骤： #

• 先安装依赖：

  npm install prerender-spa-plugin --save-dev
  

• 在vue.config.js里添加配置：

  const PrerenderSPAPlugin = require('prerender-spa-plugin');
  const path = require('path');
  
  module.exports = {
    configureWebpack: {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'), // 你的打包输出目录
          routes: ['/', '/about', '/products'], // 要预渲染的核心路由
          // 等待Vue渲染完成再生成HTML
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
  };
  

• 最后在main.js里触发渲染完成的事件：

  new Vue({
    render: h => h(App),
    mounted() {
      // 告诉预渲染工具：页面已经渲染好了，可以生成HTML了
      document.dispatchEvent(new Event('render-event'));
    }
  }).$mount('#app');
  

之后正常打包npm run build，你会发现dist目录下每个指定的路由都生成了对应的静态HTML文件，打开看就能看到完整的meta标签啦！

2. 轻量自定义SSR —— 适合路由多的大型应用 #

如果你的应用路由特别多，预渲染生成几百个静态文件不现实，那可以自己搭一套极简的SSR，不用依赖Nuxt的全家桶。核心思路是用Node.js（比如Express）做服务器，把Vue组件在服务器端渲染成带meta的HTML，再返回给客户端。

这个方案需要加一点服务器端的代码，但不用重构前端逻辑：

• 把Vue项目改成“同构”结构，拆分出可复用的入口文件（客户端入口和服务器入口）
• 用vue-server-renderer包来处理服务器端渲染
• 配合vue-meta来管理页面的meta标签，这样每个页面组件里就能单独设置自己的title、description等

虽然比预渲染麻烦一点，但胜在灵活，完全按你自己的方式来，不用受Nuxt约束。

3. 动态渲染服务 —— 零代码改动的懒人方案 #

如果连一行代码都不想改，那可以用动态渲染服务：当搜索引擎爬虫访问你的SPA页面时，服务会帮你把页面渲染成完整的HTML（包含meta标签）返回给爬虫；而普通用户访问时，还是正常加载你的SPA。

这个方案完全不用动项目代码，只需要配置一下DNS或者在服务器加个中间件转发请求，不过部分服务可能需要付费，适合完全不想折腾代码的情况。

总结 #

如果你的应用路由不多，预渲染绝对是首选，改动极小就能搞定SEO；如果路由多，就自己搭轻量SSR；要是连代码都不想碰，就用动态渲染服务。

内容的提问来源于stack exchange，提问作者user3260392