Vue - 防止 prerender-spa-plugin 加载modernizr脚本答案

【问题标题】：Vue - Prevent prerender-spa-plugin from loading modernizr scriptVue - 防止 prerender-spa-plugin 加载modernizr脚本
【发布时间】：2019-08-08 17:00:57
【问题描述】：

我正在使用 Vue-cli 3 + prerender-spa-plugin 构建一个生产网站，但我需要一些只能由最终用户加载的脚本（例如 modernizr 检测），而不是 pre-spa-plugin 环境.

如何配置设置以使 prerender-spa-plugin 忽略这些脚本？

我在索引文件中有脚本，在公共文件夹中，如下所示：

<html>
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <!-- Facebook Pixel Code -->
  </head>
  <body>
    <div id="app"></div>
    <!-- jivochat script -->

    <script src="modernizr-webp.js"></script>

  </body>
</html>

【问题讨论】：

标签： webpack single-page-application modernizr vue-cli-3 prerender

【解决方案1】：

在插件的问题中搜索我找到了一个解决方案：

在vue.config.js：

new PrerenderSPAPlugin({
  ....
  renderer:  new PrerenderSPAPlugin.PuppeteerRenderer({
     // The name of the property
      injectProperty: '__PRERENDER_INJECTED',
     // The values to have access to via `window.injectProperty` (the above property )
      inject: { foo:  'bar' }
    })
})

在应用代码中：


if ( window.__PRERENDER_INJECTED === undefined ) {
       // The code snippet to be ignored in pre-render
}

【讨论】：