Vue-SEO最適化

参照先:https://blog.csdn.net/qq_40816649/article/details/92799569
一、

<meta name="keywords" content="     " />
<meta name="description" content="      " />
<title>    </title>

二、

<h1><img alt="  logo" src="img/logo.png" /></h1>

三、

npm isntall prerender-spa-plugin --save

四、vue.config.js

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const webpack = require("webpack");
const path = require("path");

module.exports = {
  publicPath: "./",
  productionSourceMap: false,
  chainWebpack(config) {
    config.optimization.minimize(true);
    config.externals({
      vue: "Vue",
      "vue-router": "VueRouter",
      axios: "axios",
      "element-ui": "ELEMENT",
      swiper: "swiper"
    });
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV !== "production") return;
    return {
      plugins: [
        new webpack.optimize.MinChunkSizePlugin({
          minChunkSize: 10000 //        minChunkSize     chunk，  chunk              
        }),
        new PrerenderSPAPlugin({
          //        ，    webpakc     。
          //          ！！！
          //          ，          ，               ，             。
          staticDir: path.join(__dirname, "dist"),
          //          ，  a   ，      /a/param1。
          routes: [
            "/",
            "/product",
            "/serve",
            "/about",
            "/news"
          ],
          //      ，        ，        
          renderer: new Renderer({
            inject: {
              foo: "bar"
            },
            headless: false,
            //   main.js   document.dispatchEvent(new Event('render-event'))，           。
            renderAfterDocumentEvent: "render-event"
          })
        })
      ]
    };
  }
};

五、mian.js

new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')