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

目录

• 当前项目前端版本
• 解决步骤

由于目前项目是采用VueCli3 搭建的项目，对google，火狐、eage 、360等浏览器兼容不错，但是对IE确出现了问题，目前项目要上线，那个着急啊，花了将近两天的时间从网上那个度娘，必应啊，但还好最终还是完美解决了。

现在对自己这两天的辛苦做个总结，也当是记录一下自己的感悟。

当前项目前端版本

package.json

{
  "name": "vue-antd-pro",
  "version": "1.2.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/vue-fontawesome": "^0.1.8",
    "ant-design-vue": "^1.6.2",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "browserslist": "^4.12.0",
    "caniuse-lite": "^1.0.30001062",
    "core-js": "^2.6.11",
    "echarts": "^4.6.0",
    "enquire.js": "^2.1.6",
    "js-cookie": "^2.2.0",
    "lodash.get": "^4.4.2",
    "lodash.pick": "^4.4.0",
    "md5": "^2.2.1",
    "moment": "^2.24.0",
    "nprogress": "^0.2.0",
    "viser-vue": "^2.3.3",
    "vue": "^2.6.11",
    "vue-baidu-map": "^0.21.22",
    "vue-clipboard2": "^0.2.1",
    "vue-cropper": "^0.4.4",
    "vue-echarts": "^5.0.0-beta.0",
    "vue-json-excel": "^0.2.98",
    "vue-ls": "^3.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-plugin-unit-jest": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-html": "^5.0.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.6.11",
    "webpack-bundle-analyzer": "^3.1.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/strongly-recommended",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "generator-star-spacing": "off",
      "no-mixed-operators": 0,
      "vue/max-attributes-per-line": [
        2,
        {
          "singleline": 5,
          "multiline": {
            "max": 1,
            "allowFirstLine": false
          }
        }
      ],
      "vue/attribute-hyphenation": 0,
      "vue/html-self-closing": 0,
      "vue/component-name-in-template-casing": 0,
      "vue/html-closing-bracket-spacing": 0,
      "vue/singleline-html-element-content-newline": 0,
      "vue/no-unused-components": 0,
      "vue/multiline-html-element-content-newline": 0,
      "vue/no-use-v-if-with-v-for": 0,
      "vue/html-closing-bracket-newline": 0,
      "vue/no-parsing-error": 0,
      "no-console": 0,
      "no-tabs": 0,
      "quotes": [
        2,
        "single",
        {
          "avoidEscape": true,
          "allowTemplateLiterals": true
        }
      ],
      "semi": [
        2,
        "never",
        {
          "beforeStatementContinuationChars": "never"
        }
      ],
      "no-delete-var": 2,
      "prefer-const": [
        2,
        {
          "ignoreReadBeforeAssign": false
        }
      ]
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

目前可以做到兼容到>=IE9

解决步骤

1.安装 bable-polyfill

yarn install babel-polifill --save

2.vue.config.js 里配置

const path = require('path')
const webpack = require('webpack')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
function resolve (dir) {
  return path.join(__dirname, dir)
}
// vue.config.js
module.exports = {
  /*
    Vue-cli3:
    Crashed when using Webpack `import()` #2463
    https://github.com/vuejs/vue-cli/issues/2463
   */
  /*
  pages: {
    index: {
      entry: 'src/main.js',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  */
  configureWebpack: {
    // 关闭webpack 的性能提示
    performance: {
      hints: false
    },
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
      // new BundleAnalyzerPlugin()
    ],
    externals: {
      'vue': 'Vue',
      'ant-design-vue': 'antd',
      'BMap': 'BMap'
    }
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))
      .set('@static', resolve('src/static'))
    config.entry('main').add('babel-polyfill')
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          /*
          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
          */
          'font-size-base': '13px'
        },
        javascriptEnabled: true
      }
    }
  },
  devServer: {
    disableHostCheck: true,
    port: 8082,
    proxy: {
      '/api': {
        // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
        target: 'http://localhost:8080/omsdc',
        ws: false,
        changeOrigin: true
      },
      '/proxy2': {
        target: 'http://localhost:8080/omsdc',
        ws: false,
        changeOrigin: true
      }
    }
  },
  lintOnSave: undefined,
  productionSourceMap: false,
  transpileDependencies: [
    'resize-detector'
  ]
}

重点是

config.entry(‘main').add(‘babel-polyfill')，表示引入到main.js中；transpileDependencies: [
‘resize-detector'
] 

表示node_modules 里没有被转换行成es5的模块，可以从这个数组里面配置，进行转换

3.main.js 中引入 import ‘core-js’

4.重启服务，刷新IE浏览器，完美解决！！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。