Javascript 这个脚本1002:IE11中的语法错误是什么意思？（Vue）

我在Vue.JS中制作了一个web应用程序，它不会在IE11中编译，它只显示一个空白页面

我使用了巴贝尔的polyfill，但它仍然不起作用。

错误是：

SCRIPT1002: Syntax error 
chunk-vendors.js (5489,1)
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! dom7/dist/dom7.modular */ \"./node_modules/dom7/dist/dom7.modular.js\");\n/* harmony import */ var ssr_window__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ssr-window */ \"./node_modules/ssr-window/dist/ssr-window.esm.js\");\n/**\n * Swiper 5.4.1\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * http://swiperjs.com\n *\n * Copyright 2014-2020 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: May 20, 2020\n */\n\n\n\n\nconst Methods = {\n  addClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"addClass\"],\n  removeClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"removeClass\"],\n  hasClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"hasClass\"],\n  toggleClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"toggleClass\"],\n  attr: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"attr\"],\n

My babel.config.js：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["last 1 version", "ie >= 11"]
        }
      }
    ]
  ]
};

我的主要任务是：

import "babel-polyfill";
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import * as VueGoogleMaps from "vue2-google-maps";
import VueMq from "vue-mq";

Vue.use(VueMq, {
  breakpoints: {
    xs: 479,
    tablet: 991,
    laptop: 1024
  }
});

Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyBZEpbDBTlLej-ODlXEfQ8ghkt0emSbAGM",
    libraries: "places" // This is required if you use the Autocomplete plugin
    // OR: libraries: 'places,drawing'
    // OR: libraries: 'places,drawing,visualization'
    // (as you require)

    //// If you want to set the version, you can do so:
    // v: '3.26',
  }

  //// If you intend to programmatically custom event listener code
  //// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
  //// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
  //// you might need to turn this on.
  // autobindAllEvents: false,

  //// If you want to manually install components, e.g.
  //// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
  //// Vue.component('GmapMarker', GmapMarker)
  //// then disable the following:
  // installComponents: true,
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

导入“babel polyfill”；
从“Vue”导入Vue；
从“/App.vue”导入应用程序；
导入“/registerServiceWorker”；
从“/router”导入路由器；
从“/store”导入存储；
从“vue2谷歌地图”导入*作为VueLogleMaps；
从“vue mq”导入VueMq；
Vue.use（VueMq{
断点：{
xs:479，
片剂：991，
笔记本电脑：1024
}
});
Vue.use（VueLogleMaps{
负载：{
密钥：“AIzaSyBZEpbDBTlLej-ODlXEfQ8ghkt0emSbAGM”，
库：“放置”//如果您使用自动完成插件，则需要此选项
//或：库：“位置，图形”
//或：库：“位置、图形、可视化”
//（根据您的要求）
////如果要设置版本，可以执行以下操作：
//v:‘3.26’，
}
////如果您打算以编程方式自定义事件侦听器代码
////（例如，`this.$refs.gmap.$on（'zoom_changed'，someFunc）`）
////而不是通过Vue模板（例如，``）
////你可能需要打开这个。
//自动车道事件：错误，
////如果要手动安装组件，例如。
////从“vue2谷歌地图/src/components/marker”导入{GmapMarker}
////Vue.组件（'GmapMarker'，GmapMarker）
////然后禁用以下功能：
//installComponents:true，
});
Vue.config.productionTip=false；
新Vue({
路由器，
商店，
渲染：h=>h（应用程序）
}).$mount（“#app”）；

我使用了许多库，包括：

SwiperJS 真棒 Axios 洛扎德

下面是我的文件结构的图片：

---

首先不要将libs排除在传输之外（babel loader），因为您需要es5

exclude: [/node_modules\/(?!(swiper|dom7)\/).*/]

然后用插件试试这个配置，也许你还需要

“transform-exponentiation操作符”

检查如何 还有一个使用IE11处理typescript vue的好例子

// snippet from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript-typescript-legacy/index.js
{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: babelConfig.legacy
    },
    {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        compilerOptions: {
          target: 'es5'
        }
      }
    },
  ]
}

更新 根据vue cli，解决方案是transpileDependencies。您的模块是es6模块，必须传输到es5，默认情况下，webpack ignore node_模块用于传输。

---

你好，谢谢你的回复。恐怕我修不好。排除线在哪里？我很困惑。babel loader文件位于何处？starterkit/boilerplate/cli的名称是什么？我只使用Vue cli，并手动选择了创建web应用时要包含的内容。我附上了一张我的文件结构的照片。抱歉，如果这些都是愚蠢的问题，我是新的你是我的朋友，真的非常感谢你

// snippet from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript-typescript-legacy/index.js
{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: babelConfig.legacy
    },
    {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        compilerOptions: {
          target: 'es5'
        }
      }
    },
  ]
}

// vue.config.js
module.exports = {
  transpileDependencies: ['dom7', 'swiper', 'ssr-window']
}