Vue组件无法在IE中呈现

Question

I create Vue.js components and they works just fine in Edge, Chrome, Firefox etc, but not rendering in IE11. I use gulp to build a project and Babel to compile es6 to es5.

.babelrc

{
 "plugins": ["@babel/plugin-syntax-dynamic-import"],
  "presets": [
    ["vue", {"eventModifiers": false}],
    ["@babel/preset-env",{"useBuiltIns": "entry"}]]
}

May be i need others presets ?

Answer 1

The @babel/present-env preset works in such a way that you need to define which browsers the build script should support.

You could create a browserlist that contains the exact browsers or browser support percentages you want to support - https://babeljs.io/docs/en/babel-preset-env#targets

For Modern browsers + IE11 (since the support is somewhere above 2%), you could use:

{
  "browserslist": [
    "> 2%"
  ]
}

Answer 2

As far as IE11 doesn't support IE11 you have to edit your

babelrc (Babel 7)

{
  "presets": [
    [
      "@vue/app",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

let me know if that helps. If you are using Babel 6 then check Alen Genzić response.