时间戳

首页 > 解决方案 > Vue - 防止 prerender-spa-plugin 加载modernizr脚本

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

问题描述

我正在使用 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>

标签： webpacksingle-page-applicationmodernizrvue-cli-3prerender

解决方案

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

在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
}

推荐阅读