Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）

写在开头

不建议使用IE win7 XP 等微软已经放弃支持的产品
不建议用户过着原始人的生活

创建项目

• node版本
  
• vue版本 - 安装所需
  

打包

• 直接打包，将打包后的文件夹放到vscode中，使用GoLive插件运行项目，然后用IE打开发现能正常运行。
  
• 但是创建一个项目不可能什么第三方都不安装。

示例：安装echarts vue-echarts

• npm install echarts vue-echarts
• 引用插件

  // main.js
  ···
  import 'echarts';
  import ECharts from 'vue-echarts/components/ECharts.vue';
  Vue.component('v-chart', ECharts);
  ···
  

• 使用

  <!-- HelloWorld.vue -->
  <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
      <div style="height: 500px;">
        <v-chart :options="option" autoresize style="width: 100%;height: 100%;"></v-chart>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data(){
      return {
        option: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }]
        }
      }
    }
  }
  </script>
  

• 然后重复打包步骤，发现IE打开报错
  

处理兼容问题

• 在项目根目录创建vue.config.js文件，进行项目配置

  // vue.config.js
  module.exports = {
      transpileDependencies:['vue-echarts', 'resize-detector'],
  }
  

• 再次进行打包步骤，IE展示正常，兼容处理成功