vue使用prerender-spa-plugin预渲染

1.安装prerender-spa-plugin

cnpm install prerender-spa-plugin --save-dev

2.在router.js看下路由模式是不是 ‘history’，不是的请换成history

mode : 'history',     注意  如果只是为了首屏预加载    则不需要改变路由

3.在vue.config.js配置

// const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
  /** 区分打包环境与开发环境
   * process.env.NODE_ENV==='production'  (打包环境)
   * process.env.NODE_ENV==='development' (开发环境)
   * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
   */
  // 项目部署的基础路径
  // 我们默认假设你的应用将会部署在域名的根部,
  // 例如 https://www.my-app.com/
  // 如果你的应用部署在一个子路径下，那么你需要在这里
  // 指定子路径。比如将你的应用部署在
  // https://www.foobar.com/my-app/
  // 那么将这个值改为 '/my-app/ 
  // baseUrl: "/", // 构建好的文件输出到哪里
  outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败
  lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
  transpileDependencies: [    /* string or regex */
  ], // 是否为生产环境构建生成sourceMap?
  productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  devServer: {
    port: 8081,
    proxy: {
      '/apis': {
        target: 'http://101.132.34.30/',
        changeOrigin: true,
        pathRewrite: {
          '^/apis': ''
        }
      }
    }
  },

  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/', '/About', 'Text'],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'
          })
        }),
      ],
    };
  }


}

3.main.js配置

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

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

4.使用vue-meta-info插件，改变link、title、meta等

import MetaInfo from 'vue-meta-info'     //main.jsVue.use(MetaInfo);

export default {  //  当前页面
    metaInfo: {title: '',
        meta: [
            {name: 'description',content: '***是'},
            {name: 'keywords',content: '****'}],},
        data(){
    	    return{}
        }
}  

5.注意坑

一，构建不成功
1.  报错
/node_modules/@prerenderer/renderer-puppeteer/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory

解决方案： 安装如下依赖
yum install libXScrnSaver atk java-atk-wrapper at-spi2-atk gtk3 libXt -y

2.安装以上依赖还是构建不成功，前端隐藏headless: false,

6.本地查看效果

项目打包文件dist下启动http-server服务

没有的话  cnpm install http-server -g

然后浏览器查看效果