Vue~~ 伪静态（prerender-spa-plugin）

第一步：安装prerender-spa-plugin

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

 

第二步：build/webpack.prod.conf.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

    plugins下：

   // 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的；

new PrerenderSPAPlugin({
   // 生成文件的路径，也可以与webpakc打包的一致。
   // 下面这句话非常重要！！！
   // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
   staticDir: path.join(__dirname, '../dist'),
   routes: ['/', '/index', '/combinedRanking', '/ranking', '/schoolBrief', '/majorDetails', '/schoolContrast', '/checkSchool', '/checkMajor', '/calendar', '/pagePicture'],

   // 这个很重要，如果没有配置这段，也不会进行预编译
   renderer: new Renderer({
       inject: {
    foo: 'bar'
       },
      headless: false,
     // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
    renderAfterDocumentEvent: 'render-event'
   })
}),

 

第三步：src/main.js

// SEO优化
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

//SEO
//这句非常重要，否则预渲染将不会启动 
  mounted () {
      document.dispatchEvent(new Event('render-event'))        // 预渲染
      //document.dispatchEvent(new Event('custom-render-trigger'))     // 预渲染
  }

第四步：src/router/index.js

mode : 'history',