Question

在Nuxt 1.4.2中，我的nuxt.config.js中包含以下内容：

build: {
  vendor: ['babel-polyfill'],
  babel: {
    presets: [
      ['vue-app', {
        useBuiltIns: true,
        targets: { ie: 11, uglify: true },
      },
      ],
    ],
  },
},

在Nuxt 2.0中似乎所有这些都被破坏了。至少我希望能够充分填充以使IE 11正常工作。这是我尝试过的：

像以前一样使用供应商

删除build.babel可使构建过程正常工作

build: {
  vendor: ['babel-polyfill'],
},

但是我认为 build.vendor现在只是被忽略，因此这似乎无济于事。

使用polyfill.io

我尝试添加：

script: [
  { src: 'https://cdn.polyfill.io/v2/polyfill.min.js' },
],

与我的head一起，

render: {
  resourceHints: false,
},

禁用preload提示（我不确定是否很重要）。这将导致页面看起来正确-polyfill.min.js在所有其他脚本之前被加载。不知何故，当我在ie11上进行测试时，Object.entries未定义并且页面爆炸。

Answer 1

以下是我升级到nuxt 2.2.0并采用必要的polyfill使我的应用程序在IE 11上运行的步骤。您的经验可能会有所不同，具体取决于您安装了哪些软件包。

第1步

从build.vendor中删除build.babel和nuxt.config.js。

build.vendor已过时。我尝试调整build.babel，因为nuxt docs表示默认使用vue-app。我认为它实际上是在使用babel-preset-env。这和其他工具一起取决于browserslist，后者具有一些合理的defaults。我没有更改浏览器列表的配置，但是可以按照他们的docs进行操作。

第2步

升级或更换所有引起构建问题的模块。当我升级时，@nuxtjs/apollo通过其依赖项之一出现了翻译问题。此后一直是resolved，但是我最终切换到vue-apollo + apollo-boost，因为它更适合我的项目。

第3步

为core-js没有提供的附加功能添加polyfill，但是目标浏览器需要。在对目标进行测试时，您应该能够根据控制台中抛出的任何异常来确定这些异常。

我通过在nuxt.config.js中添加以下内容来使用polyfill.io：

const features = [
  'fetch',
  'Object.entries',
  'IntersectionObserver',
].join('%2C');

head: {
  script: [
    { src: `https://polyfill.io/v3/polyfill.min.js?features=${features}`, body: true },
  ],
},

注意：我包含了body: true，可将脚本移出页面的head部分。但是，它将插入任何应用程序代码之前。

注意：：建议link prefetching使用IntersectionObserver。

您可以使用builder创建类似的URL。请注意，一旦选择了特征，构建器将自动选择default，其功能（据我所知）与core-js一起提供的polyfill相同。因为core-js当前不是可选的（无论如何您都将要发送它），所以不包括default中的polyfill.io集是有道理的。

要深入讨论polyfill，以及为什么polyfill.io可能是个好主意，请参阅this post。简短的版本是，它仅基于浏览器的UA加载客户端实际需要的内容。

最后，您需要测试您的应用，以查看在给定的浏览器中成功执行还需要哪些附加功能（如果有）。您可能需要重复几次此过程，直到所有错误消失。请确保在多个页面上进行测试，因为并非所有页面捆绑软件都具有相同的要求。

结论

尽管以上内容是特定于应用程序的，但希望这可以帮助您朝正确的方向发展。最重要的一点是，没有针对此的解决方案-您仍然需要在目标浏览器中进行测试，以验证代码是否可以执行。

Answer 2

您还可以使用nuxt-polyfill模块。

它支持功能检测 在加载任何polyfill之前
与polyfill.io填充物兼容。
默认填充中不包含polyfills。
仅在需要时才懒加载polyfills
仅当需要填充时才延迟Nuxt初始化。

[FunctionName("MyFristTriggerFunction")]
public static void MyFristTriggerFunction(
    [EventHubTrigger("%eventHubName%", Connection = @"EventHubConnectionString")] EventData[] events
    ILogger log)
{

将模块添加到您的nuxt.config.js：

npm install nuxt-polyfill

免责声明：我做到了。

Answer 3

我尝试了上述所有方法，但没有任何效果。但是，我发现可以通过创建一个插件并将其添加到nuxt.config.js来使我的代码与IE11配合使用，如下所示：

// nuxt.config.js

  plugins: [
    { src: '~/plugins/polyfills', mode: 'client' },
  ],

// plugins / polyfills.js

import 'core-js/fn/object/entries'
import 'core-js/fn/array/includes'
import 'core-js/fn/array/find'
import 'core-js/fn/array/from'
import 'core-js/es6/promise'
import 'core-js/fn/object/assign'
import 'core-js/es6/symbol'
import 'whatwg-fetch'

我删除了任何特殊的babel配置。仅此而已。我知道这意味着我的代码将始终运行polyfills，但没有第三方依赖（例如polyfill.io）。您可以根据需要编辑所需填充的列表。希望这对某人有帮助！

Answer 4

我使用的是 nuxt 2.x，修复很简单，你只需要在 nuxt.config.js 中添加 transpile

build: { transpile: ['vue-cli-plugin-apollo'] }

如何在nuxt 2.0中添加polyfill？

像以前一样使用供应商

使用polyfill.io

4 个答案: