要点提示

前提：prerender-spa-plugin只能渲染静态页面的内容，别指望渲染动态从数据库那获取的内容，大坑，我才晓得

使用这个多半是为了加快网站访问速度和进行seo优化

预渲染优势

访问速度加快：你正常打包出来的文件如下，只有一个html，其他的页面需要在打开这个html后渲染，这就需要花时间

如果是 用了预渲染打包出来的页面如下，可以看到有很多个html文件，这些html文件都可以打开

 seo优化

这个需要配合vue-meta-info插件，改变link、title、meta

我有一篇文章里面介绍了这个插件

https://blog.csdn.net/qq_59068750/article/details/122491545?spm=1001.2014.3001.5502

如何在vue页面中使用

安装插件

 npm install prerender-spa-plugin

在config/index.js文件中找build标签，修改以下内容

   index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

在main.js中修改以下代码

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

 在webpack.prod.conf.js添加代码

 注意！这里跟别人不一样的就是 这个我去掉了  headless: false,

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


  plugins: [
    new PrerenderSPAPlugin({
      //你存放的静态资源目录
      staticDir: path.join(__dirname, '../dist'),
      //你需要对哪几个路由进行SEO，数组形式，可以多个路由
      routes: ['/','/home', '/case'],
      //预编译的重要配置
      renderer: new Renderer({
        inject: {
          foo: 'far'
        },
    
        //非常重要，文档事件渲染后调用的事件名，在项目的入口中使用
        renderAfterDocumentEvent: 'render-event'

      })

    }),

]

配置结束，npm run build即可