如何以最少代码修改让Vue.js SPA支持Google爬虫抓取内容？

针对你用Express后端的Vue.js SPA无法被Google爬虫抓取的问题，以下是几种改动极小的解决方案，按实现复杂度排序：

方案1：切换到HTML5 History模式并配置Express Fallback #

这是改动最少的方案之一，适配Google对现代SPA的抓取逻辑：

• 前端修改（1处）：在Vue路由配置中启用History模式，替代默认的Hash模式：

const router = new VueRouter({
  mode: 'history', // 替换原有的hash模式
  routes: [/* 你的路由配置 */]
});

• 后端修改（3行核心代码）：使用connect-history-api-fallback中间件处理路由 fallback，让所有非静态资源请求都返回SPA的入口文件index.html：
  1. 先安装依赖：npm install connect-history-api-fallback --save
  2. 修改Express服务代码：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 先托管静态资源（Vue打包后的dist目录）
app.use(express.static('dist'));
// 启用History模式的fallback
app.use(history());
// 再次托管静态资源，确保fallback后能正确加载静态文件
app.use(express.static('dist'));

app.listen(3000);

方案2：预渲染指定路由（无需修改后端） #

如果不想改动路由模式，预渲染会在打包阶段将指定路由的页面生成为完整静态HTML，爬虫可直接抓取：

• 前端配置：安装prerender-spa-plugin并在vue.config.js中添加配置：
  1. 安装依赖：npm install prerender-spa-plugin --save-dev
  2. 修改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'], // 填入你需要预渲染的路由列表
      })
    ]
  }
};

打包后dist目录下会生成对应路由的静态HTML文件，直接部署即可，后端无需额外修改。

额外提示 #

• Googlebot现在具备JS执行能力，但如果你的SPA存在延迟加载、需用户交互才渲染的内容，仍可能无法被抓取，预渲染模式能彻底解决这类问题。
• 确保每个路由的页面标题、描述等meta标签可被正确识别，可使用vue-meta插件统一管理路由meta信息，辅助爬虫抓取页面核心信息。

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