VueCLI3项目中使用Pre-renderSPAPlugin进行预渲染

页面预渲染技术适合于那些以静态内容为主的页面。若页面涉及大量的API接口调用，则推荐使用SSR（服务器端渲染）方案，比如Nuxt框架。此外，有关更多的优化建议，可以访问：Vue CLI 3 优化指南

安装 Pre-render SPA Plugin

通过 npm 安装预渲染插件：

npm install prerender-spa-plugin --save

配置 vue.config.js 文件

在 vue.config.js 文件中添加预渲染配置：

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

module.exports = {
  configureWebpack: cOnfig=> {
    config.plugins.push(
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, './dist'),
        routes: [
          '/', '/aboutview', '/adHome', '/finaHome', '/lawHome', '/capitalHome', '/payFaceSwip', '/payEwm', '/payPos', '/paySweepEwm', '/payCashier', '/payCustom'
        ],
        minify: {
          minifyCSS: true,
          removeComments: true
        },
        renderer: new Renderer({
          injectProperty: '__PRERENDER_INJECTED',
          inject: {},
          renderAfterDocumentEvent: 'render-event',
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
            renderAfterTime: 5000
          })
        })
      })
    );
  }
};

修改 main.js 文件

确保在 main.js 中添加 mounted 生命周期钩子，以便触发预渲染事件：

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

参考资料：
CSDN - Vue CLI 3 配置预渲染插件
简书 - Vue 预渲染实践
简书 - Vue 预渲染踩坑记录
叶胡子 - Vue CLI 3 使用预渲染插件遇到的莫名奇妙的坑
简书 - Vue 预渲染解决方案