我的应用程序在Chrome / Firefox / Edge中运行良好,但是IE11给了我一些问题。在本地主机上测试应用程序时,在控制台的IE11中出现以下错误:
SCRIPT1002: Syntax error
app.js (49143, 1)
当我单击上面的代码时,它跳到我代码的这一部分,成为可能的错误区域:
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Config; });
class Config { <---this is line 49143
constructor() {
this.config = {}
for(var i = 0; i < arguments.length; i++) {
Object.assign(this.config, arguments[i])
}
}
我猜想IE11在使用ES6时遇到了问题。是否为IE11正确配置了我的项目?
我的package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report --modern",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.18",
"@fortawesome/free-solid-svg-icons": "^5.8.2",
"@fortawesome/vue-fontawesome": "^0.1.6",
"animate.css": "^3.7.0",
"axios": "^0.18.0",
"bootstrap": "^4.2.1",
"bootstrap-vue": "^2.0.0-rc.20",
"jquery": "^3.4.1",
"jso": "^4.1.1",
"vue": "^2.6.10",
"vue-matomo": "^0.6.0",
"vue-popperjs": "^1.6.1",
"vue-router": "^3.0.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
}
}
Babel.config.js
module.exports = {
presets: ['@vue/app']
}
.browserslistrc
> 1%
last 2 versions
not ie <= 8
感谢您提供的任何提示!
更新:可能是babel-transpiler问题?
这是我的演示代码。如您所见,在IE11中不起作用: https://codesandbox.io/embed/bootstrapvue-table-assigness-and-checkbox-final-h5vst
答案 0 :(得分:1)
上次不得不处理此类错误时,我想到了以下解决方案:
babel.config.js
module.exports = function (api) {
const config = {
"presets": [
["@babel/env", {
"targets": {
"browsers": [
"last 4 versions",
"IE 11"
]
}
}],
// "@babel/stage-0"
],
plugins: [
// Stage 0
"@babel/plugin-proposal-function-bind",
// Stage 1
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
["@babel/plugin-proposal-optional-chaining", {"loose": false}],
["@babel/plugin-proposal-pipeline-operator", {"proposal": "minimal"}],
["@babel/plugin-proposal-nullish-coalescing-operator", {"loose": false}],
"@babel/plugin-proposal-do-expressions",
// Stage 2
["@babel/plugin-proposal-decorators", {"legacy": true}],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
// Stage 3
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", {"loose": false}],
"@babel/plugin-proposal-json-strings",
["transform-es2015-template-literals", {
// "loose": true,
"spec": true
}],
["@babel/plugin-transform-runtime", {
"helpers": false,
"regenerator": true
}]
],
};
return config;
};
ofc,所有这些babel插件都应安装为devDependencies。