vue如何进行SEO优化？ --- prerender-spa-plugin

Vue是单页面应用，所以对于SEO并不友好。那么如何进行SEO优化呢？？？

一、实现方案

• SSR服务器渲染
• 预渲染prerender-spa-plugin
• 使用Phantomjs针对爬虫做处理

关于SSR服务器渲染，可查看 【官网介绍 】

二、预渲染prerender-spa-plugin

使用步骤：

1.安装插件

yarn add prerender-spa-plugin -S

2.vue.config.js配置

//  引入插件
const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require("path");

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== "production") return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, "dist"),
          // 对应实际路由文件，比如/about有参数，就需要写成 /about/**。
          routes: ["/", "/about", "/product"],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: "bar",
            },
            renderAfterDocumentEvent: "render-event",
            renderAfterTime: 10000,
          }),
        }),
      ],
    };
  },
};

3. main.js配置

new Vue({
  router,
  store,
  render: (h) => h(App),
  mounted() {
   // 这句是重点， 'render-event' 需要和 vue.config.js里的renderAfterDocumentEvent值一致
    document.dispatchEvent(new Event("render-event"));
  },
}).$mount("#app");

特别需要注意：

• router中路由模式必须使用history
• router里不允许使用路由懒加载(最起码前两个路由不允许)

打包即可查看到dist生成了对应的文件夹以及文件。
如：

当然，这是页面里写死的布局。
项目必不可少的就是请求后端接口进行数据展示，而这样直接使用异步请求，数据并不会进行渲染。

4.预渲染 + 异步数据渲染

那么该如何解决呢？
经过一番尝试加向更优秀人员的请教下，解决方案如下，两处需要改动之处：

...
// 第一处：
server: {
    proxy: {
        "/serverApi": {
            target: "http://localhost:5500/test",
            changeOrigin: true, //是否跨域
            pathRewrite: {
               "^/serverApi": "", //需要rewrite重写的,
            },
         },
     },
},
...

...
// 第二处：
renderAfterElementExists: "#app",
...

因为本地打包后产生跨域情况，所以需要第一处进行请求代理。

因为请求是异步的，所以需要配置该属性。

更多可查看 【gitHub】

打包完成可查看到异步数据也打包到了文件里。
页面布局：

打包后的数据：

需要注意：

可被SEO优化抓取的数据，仅在执行打包操作后才会被更新。

就是说就算接口里的数据发生了变化，但是没有进行再次打包，那么页面可被抓取到的数据仍然是上次的没发生变化的接口数据

有个插件预渲染插件配对，可以隔段时间自动打包，有兴趣的自己研究一下