vue2前后端分离项目使用使用prerender-spa-plugin 让搜索引擎抓取到静态页面详细教程

vue2前后端分离项目中使用prerender-spa-plugin来使搜索引擎能够抓取到静态页面的教程如下：

1. 安装prerender-spa-plugin: 使用npm安装prerender-spa-plugin

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

2. 在vue.config.js中配置prerender-spa-plugin: 在vue.config.js中添加如下代码

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

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: [ '/', '/about', '/contact' ],
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            renderAfterDocumentEvent: 'render-event'
          })
        }),
      ]
    }
  }
}

3. 在main.js中添加触发预渲染的事件: 在main.js中添加如下代码

if (process.env.NODE_ENV === 'production') {
  // Trigger the renderer.
  document.dispatchEvent(new Event('render-event'))
}

4. 打包项目: 执行如下命令来打包项目

npm run build

完成以上步骤后，在dist文件夹中会生成对应的静态页面，搜索引擎可以抓取到这些静态页面。