VueCli3中兼容IE11配置的艰苦历程

下面是详细的“VueCli3中兼容IE11配置的艰苦历程”的完整攻略：

第一步：安装依赖和设置babel

1. 在项目根目录下，通过以下命令安装两个依赖：

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack --save-dev

这里我们使用了babel-loader的beta版本，因为目前VueCli3的兼容性官方并没有给出太多的支持。

1. 修改babel.config.js文件，使其包含如下内容：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        ie: '11'
      },
      useBuiltIns: false
    }]
  ]
};

这里我们指定了使用@babel/preset-env，同时使用它的targets选项和useBuiltIns选项，以便使代码能够兼容IE11浏览器。

第二步：配置兼容IE11的polyfill

为了确保我们写的代码能够在IE11上正常运行，我们需要添加一个polyfill来提供缺失的API和语言特性。

1. 通过以下命令安装polyfill:

npm install --save @babel/polyfill

1. 在main.js文件的开头添加如下代码：

import '@babel/polyfill';

这里的import '@babel/polyfill'会将整个polyfill加载到我们的应用程序中。

第三步：设置Webpack配置

为了确保Webpack能够正确地打包我们的应用程序，我们需要进行一些必要的配置。

我们需要在VueCli3的默认配置中添加一些额外的设置。

在你的项目目录中，创建一个vue.config.js文件，并添加如下内容：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          }
        }
      ]
    }
  }
};

这里我们告诉Webpack在处理JS文件时使用babel-loader，以确保代码被正确地加载和编译。

示例一：对IE11不兼容的语法的处理

在VueCli3中，有些语法是IE11不兼容的，例如箭头函数和模板字符串等。

修改你的代码中的这些语法，将它们转换为IE11能够识别的ECMAScript5代码。例如，下面是一个使用了模板字符串的ES6代码：

const name = 'Jane';
console.log(`Hello ${name}`);

我们需要将其转换为ECMAScript5代码：

var name = 'Jane';
console.log('Hello ' + name);

示例二：修复IE11中的bug

IE11浏览器中的一些bug可能会导致Vue应用程序中的问题。以下是其中一种例子。

VueCli3中默认导出的App.vue示例组件中可能会遇到一个bug：在IE11中，标签之间的换行符可能会被渲染为额外的空格。

为了解决这个问题，我们需要在App.vue组件中使用一个hack，如下所示：

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<style scoped>
/* IE11 hack: remove extra spacing */
::before, ::after {
  content: "";
  display: table;
}
::after {
  clear: both;
}
</style>

这里的IE11 hack会将每个元素的::before和::after设为display: table;line-height: 0;content: none;，从而避免了IE11中的问题。

总结

这就是VueCli3中兼容IE11配置的大致过程。我们需要确保代码能够正确地加载并编译，同时需要添加polyfill以提供缺失的API和语言特性。

我们还需要修复IE11中的可能导致问题的bug，并避免使用不兼容IE11的语法，以确保我们的应用程序能够在IE11中正常运行。