Vue CLI 3 应用程序未在 IE 中加载某些 npm 包

Question

我用 vue-cli 3 创建了一个 Vue 应用程序。它在所有浏览器中都运行良好，直到我安装了一个 npm 包 "microsoft-cognitiveservices-speech-sdk"。据我所知，我猜这个特定的包不会被 babel 转译。下面是我的 babel.config.js 和 package.json

//babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ]
}

//package.json
{
  "name": "vueApp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "microsoft-cognitiveservices-speech-sdk": "^1.7.0",
    "vue": "^2.6.10",
    "vue-good-table": "^2.18.0",
    "vue-i18n": "^8.14.0",
    "vue-router": "^3.1.2",
    "vue-uuid": "^1.1.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "http-proxy-middleware": "^0.20.0",
    "less": "^3.10.2",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

安装包后，我的应用程序无法在 IE（版本 11）浏览器中加载。但在 Google Chrome 中就像一个魅力。谁能帮我解决这个问题？提前致谢！

Answer 1

经过大量研究并尝试了网络上的建议后，我已经解决了这个问题。很明显，您需要为应用程序创建一个配置文件来转换您的问题包。

在您的根目录中创建一个 vue.config.js 并添加一个属性 transplieDependencies，一个包含您的 es5 转换问题库的数组。

//vue.config.js
module.exports = {
    transplieDependencies: [
        "your trouble library name"
    ]
}

实施上述更改后，重新启动服务器以使其在 IE 中正常工作。

Vue CLI 3 应用程序未在 IE 中加载某些 npm 包

Vue CLI 3 app not loading in IE with some npm packages

ecmascript-6

vue.js

babeljs

babel-polyfill

vue-cli-3