解决 Next.js 在 IE11 上出现白屏的问题-JavaScript中文网-JavaScript教程资源分享门户

背景

近年来，在项目开发中使用前端框架已成为了一种趋势，Next.js 是一个基于 React 的框架，具有多种优秀的特性，例如自动代码分割，服务器端渲染以及静态导出等等。但是在一些特殊的场景下，例如在 Internet Explorer 11 中，会出现白屏的问题，这对于一些用户而言，会造成极度不便。

解决方法

1. Babel 配置

因为 IE11 的兼容性较差，需要在 Next.js 项目中添加 Babel 的 Polyfill。首先，在 Next.js 项目中安装 @babel/polyfill 库：

npm install --save @babel/polyfill

接下来，在项目的 babel.config.js 文件中添加以下的内容：

// javascriptcn.com 代码示例
module.exports = {
  presets: [
    ["next/babel"],
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: "3.8",
        targets: {
          ie: "11"
        }
      }
    ]
  ],
  /* Other configs */
}

上面的代码中，使用了 useBuiltIns: "usage"，这个选项是根据代码中使用到的 Polyfill 根据 browserslist 来进行按需加载。

2. 配置 Postcss

同样地，要解决 IE11 兼容性的问题，还需要在项目中添加 Postcss 的 Polyfill。需要在 Next.js 项目中新增 Postcss 的配置文件 postcss.config.js，并在其中添加以下的内容：

// javascriptcn.com 代码示例
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 0,
      autoprefixer: {
        flexbox: 'no-2009',
        overrideBrowserslist: ['> 1%', 'last 2 versions', 'IE 11']
      },
      features: {
        'nesting-rules': true
      }
    })
  ]
}

在上述代码中，配置了 overrideBrowserslist: ['> 1%', 'last 2 versions', 'IE 11']，代表要兼容的浏览器包括 IE 11。

3. 配置环境变量

为了保证代码能够正确地运行，在 Next.js 项目中还需要配置环境变量，添加以下的配置：

// .env
BROWSER=none

这个配置是禁止在构建时打开浏览器，这在某些环境下会导致出现问题。

4. 配置 Webpack

最后，在 Next.js 项目中配置 Webpack，添加以下的配置：

module.exports = {
  // Other configs
  target: "node",
  optimization: {
    minimize: false
  },
  // Other configs
}

在上述代码中，target: "node" 表示当前项目是运行在 Node 环境上的，而 IE11 的兼容性问题主要集中在浏览器端，所以这里使用 target: "node" 进行限制。

示例代码

对应的示例代码如下：

// javascriptcn.com 代码示例
// babel.config.js
module.exports = {
  presets: [
    ["next/babel"],
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: "3.8",
        targets: {
          ie: "11"
        }
      }
    ]
  ]
}

// postcss.config.js
module.exports = {
  plugins: [
    require("postcss-preset-env")({
      stage: 0,
      autoprefixer: {
        flexbox: "no-2009",
        overrideBrowserslist: ["> 1%", "last 2 versions", "IE 11"]
      },
      features: {
        "nesting-rules": true
      }
    })
  ]
}

// .env
BROWSER=none

// next.config.js
module.exports = {
  target: "node",
  optimization: {
    minimize: false
  }
}

总结

在某些场景下，例如在 IE11 环境下的 Next.js 项目，会出现白屏的问题。为了解决这个问题，需要对 Next.js 项目进行一系列的配置，包括 Babel 配置、Postcss 配置、环境变量配置、Webpack 配置等等。虽然这个过程较为繁琐，但是可以帮助我们解决问题，提高项目的兼容性，在某些场景下，可以给用户提供更好的用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651cd1f095b1f8cacd452274