24

在 Nuxt1.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 工作的 polyfill。这是我尝试过的：

像以前一样使用供应商

删除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未定义并且页面爆炸了。

4

4 回答 4

28

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

第1步

从中删除build.vendor和。build.babelnuxt.config.js

build.vendor已弃用。我试图调整build.babel，因为nuxt 文档表明它默认使用vue-app. 我认为它实际上是在使用babel-preset-env。这与其他工具一起取决于browserslist，它有一些合理的默认值。我没有更改我的 browserslist 配置，但您可以按照他们的文档进行操作。

第2步

升级或更换任何导致构建问题的模块。当我升级时，@nuxtjs/apollo通过其依赖项之一出现了转译问题。这已经解决了，但是我最终切换到vue-apollo+ apollo-boost，因为它更适合我的项目。

第 3 步

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

我通过将以下内容添加到以下内容来使用polyfill.ionuxt.config.js：

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页面部分的内容。但是，它将被插入到您的任何应用程序代码之前。

注意： IntersectionObserver建议用于链接预取。

您可以使用builder创建类似的 URL 。请注意，一旦您选择了一个特性，构建器将自动选择default，它（据我所知）在功能上等同于core-js. 因为core-js目前不是可选的（无论如何你都要发货），所以不包含default来自polyfill.io.

有关 polyfill 的深入讨论以及为什么polyfill.io它可能是一个好主意，请参阅这篇文章。简短的版本是它仅根据浏览器的 UA 加载客户端实际需要的内容。

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

结论

虽然上述某些方面是特定于应用程序的，但希望这可以帮助您朝着正确的方向前进。最重要的一点是没有唯一的解决方案——您仍然需要在目标浏览器中进行测试以验证代码是否执行。

于 2018-10-19T07:22:43.937 回答
8

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

  • 它支持在加载任何 polyfill 之前进行特征检测
  • 与polyfill.io polyfill兼容。
  • 不包括默认捆绑包中的 polyfill。
  • 仅在需要时才延迟加载 polyfill
  • 当且仅当需要 polyfill 时才延迟 Nuxt 初始化。
npm install nuxt-polyfill

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

export default {

    // Configure polyfills:
    polyfill: {
        features: [
            /* 
                Feature without detect:

                Note: 
                  This is not recommended for most polyfills
                  because the polyfill will always be loaded, parsed and executed.
            */
            {
                require: 'url-polyfill' // NPM package or require path of file
            },

            /* 
                Feature with detect:

                Detection is better because the polyfill will not be 
                loaded, parsed and executed if it's not necessary.
            */
            {
                require: 'intersection-observer',
                detect: () => 'IntersectionObserver' in window,
            },

            /*
                Feature with detect & install:

                Some polyfills require a installation step
                Hence you could supply a install function which accepts the require result
            */
            {
                require: 'smoothscroll-polyfill',

                // Detection found in source: https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js
                detect: () => 'scrollBehavior' in document.documentElement.style && window.__forceSmoothScrollPolyfill__ !== true,

                // Optional install function called client side after the package is required:
                install: (smoothscroll) => smoothscroll.polyfill()
            }
        ]
    },

    // Add it to the modules section:
    modules: [
        'nuxt-polyfill',
    ]
}

免责声明：我做到了。

于 2019-03-16T13:56:37.890 回答
8

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

// nuxt.config.js

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

// 插件/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 配置。这就是全部。我知道这意味着我的代码将始终运行 polyfill，但没有第 3 方依赖项（例如 polyfill.io）。您可以根据需要编辑所需的 polyfill 列表。希望这对某人有帮助！

于 2019-08-17T16:52:20.180 回答
0

我正在使用nuxt 2.x，修复很简单，你只需要添加 transpilenuxt.config.js

build: { transpile: ['vue-cli-plugin-apollo'] }
于 2021-04-06T05:53:35.897 回答