问题是我的应用程序无法在IE11中正常工作,我正在将vue-cli3与babel polyfill 7一起使用(package.json中的浏览器列表)
在IE11上,我在控制台expected ':'
当我尝试命令npx browserSlist时,我看到IE11,这样就可以了:)
我的babel.conf :(我将默认的@vue ...预设更改为@ babel / preset-env,因此debug:true有效)
module.exports = {
'presets': [
[
'@babel/preset-env',
{
'useBuiltIns': 'entry'
},
],
],
};
package.json中的浏览器列表部分:
"browserslist": [
"last 1 version",
"> 1%",
"not dead",
"ie 11"
]
日志:
C:\Users\ricar\Projects\event-entrance-system-frontend>npx browserSlist
and_chr 69
and_ff 62
and_qq 1.2
and_uc 11.8
android 67
baidu 7.12
chrome 69
chrome 68
chrome 67
edge 17
firefox 62
firefox 61
ie 11
ie_mob 11
ios_saf 11.3-11.4
ios_saf 11.0-11.2
op_mini all
op_mob 46
opera 55
safari 12
safari 11.1
samsung 7.2
C:\Users\ricar\Projects\event-entrance-system-frontend>npm run serve
> update@0.1.0 serve C:\Users\ricar\Projects\event-entrance-system-frontend
> vue-cli-service serve
INFO Starting development server...
11% building modules 9/11 modules 2 active ...system-frontend\node_modules\url\url.js@babel/preset-env: `DEBUG` option
Using targets:
{
"android": "67",
"chrome": "67",
"edge": "17",
"firefox": "61",
"ie": "11",
"ios": "11",
"safari": "11.1"
}
Using modules transform: commonjs
Using plugins:
transform-template-literals { "android":"67", "ie":"11" }
transform-literals { "android":"67", "ie":"11" }
transform-function-name { "android":"67", "edge":"17", "ie":"11" }
transform-arrow-functions { "android":"67", "ie":"11" }
transform-block-scoped-functions { "android":"67" }
transform-classes { "android":"67", "ie":"11" }
transform-object-super { "android":"67", "ie":"11" }
transform-shorthand-properties { "android":"67", "ie":"11" }
transform-duplicate-keys { "android":"67", "ie":"11" }
transform-computed-properties { "android":"67", "ie":"11" }
transform-for-of { "android":"67", "ie":"11" }
transform-sticky-regex { "android":"67", "ie":"11" }
transform-unicode-regex { "android":"67", "ie":"11" }
transform-spread { "android":"67", "ie":"11" }
transform-parameters { "android":"67", "ie":"11" }
transform-destructuring { "android":"67", "edge":"17", "ie":"11" }
transform-block-scoping { "android":"67", "ie":"11" }
transform-typeof-symbol { "android":"67", "ie":"11" }
transform-new-target { "android":"67", "ie":"11" }
transform-regenerator { "android":"67", "ie":"11" }
transform-exponentiation-operator { "android":"67", "ie":"11" }
transform-async-to-generator { "android":"67", "ie":"11" }
proposal-async-generator-functions { "android":"67", "edge":"17", "ie":"11", "ios":"11", "safari":"11.1" }
proposal-object-rest-spread { "android":"67", "edge":"17", "ie":"11", "ios":"11" }
proposal-unicode-property-regex { "android":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11" }
transform-dotall-regex { "android":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11" }
Using polyfills with `entry` option:
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\main.js] Replaced `@babel/polyfill` with the following polyfills:
es6.array.copy-within { "android":"67", "ie":"11" }
es6.array.fill { "android":"67", "ie":"11" }
es6.array.find { "android":"67", "ie":"11" }
es6.array.find-index { "android":"67", "ie":"11" }
es6.array.from { "android":"67", "ie":"11" }
es7.array.includes { "android":"67", "ie":"11" }
es6.array.iterator { "android":"67", "ie":"11" }
es6.array.of { "android":"67", "ie":"11" }
es6.array.sort { "android":"67" }
es6.array.species { "android":"67", "ie":"11" }
es6.date.to-primitive { "android":"67", "ie":"11" }
es6.function.has-instance { "android":"67", "ie":"11" }
es6.function.name { "ie":"11" }
es6.map { "android":"67", "ie":"11" }
es6.math.acosh { "android":"67", "ie":"11" }
es6.math.asinh { "android":"67", "ie":"11" }
es6.math.atanh { "android":"67", "ie":"11" }
es6.math.cbrt { "android":"67", "ie":"11" }
es6.math.clz32 { "android":"67", "ie":"11" }
es6.math.cosh { "android":"67", "ie":"11" }
es6.math.expm1 { "android":"67", "ie":"11" }
es6.math.fround { "android":"67", "ie":"11" }
es6.math.hypot { "android":"67", "ie":"11" }
es6.math.imul { "ie":"11" }
es6.math.log1p { "android":"67", "ie":"11" }
es6.math.log10 { "android":"67", "ie":"11" }
es6.math.log2 { "android":"67", "ie":"11" }
es6.math.sign { "android":"67", "ie":"11" }
es6.math.sinh { "android":"67", "ie":"11" }
es6.math.tanh { "android":"67", "ie":"11" }
es6.math.trunc { "android":"67", "ie":"11" }
es6.number.constructor { "android":"67", "ie":"11" }
es6.number.epsilon { "android":"67", "ie":"11" }
es6.number.is-finite { "ie":"11" }
es6.number.is-integer { "android":"67", "ie":"11" }
es6.number.is-nan { "ie":"11" }
es6.number.is-safe-integer { "android":"67", "ie":"11" }
es6.number.max-safe-integer { "android":"67", "ie":"11" }
es6.number.min-safe-integer { "android":"67", "ie":"11" }
es6.number.parse-float { "android":"67", "ie":"11" }
es6.number.parse-int { "android":"67", "ie":"11" }
es6.object.assign { "android":"67", "ie":"11" }
es7.object.define-getter { "android":"67", "ie":"11" }
es7.object.define-setter { "android":"67", "ie":"11" }
es7.object.entries { "android":"67", "ie":"11" }
es6.object.freeze { "android":"67", "ie":"11" }
es6.object.get-own-property-descriptor { "android":"67", "ie":"11" }
es7.object.get-own-property-descriptors { "android":"67", "ie":"11" }
es6.object.get-own-property-names { "android":"67", "ie":"11" }
es6.object.get-prototype-of { "android":"67", "ie":"11" }
es7.object.lookup-getter { "android":"67", "edge":"17", "ie":"11" }
es7.object.lookup-setter { "android":"67", "edge":"17", "ie":"11" }
es6.object.prevent-extensions { "android":"67", "ie":"11" }
es6.object.is { "ie":"11" }
es6.object.is-frozen { "android":"67", "ie":"11" }
es6.object.is-sealed { "android":"67", "ie":"11" }
es6.object.is-extensible { "android":"67", "ie":"11" }
es6.object.keys { "android":"67", "ie":"11" }
es6.object.seal { "android":"67", "ie":"11" }
es6.object.set-prototype-of { "android":"67" }
es7.object.values { "android":"67", "ie":"11" }
es6.promise { "android":"67", "ie":"11" }
es7.promise.finally { "android":"67", "edge":"17", "ie":"11", "ios":"11" }
es6.reflect.apply { "android":"67", "ie":"11" }
es6.reflect.construct { "android":"67", "ie":"11" }
es6.reflect.define-property { "android":"67", "ie":"11" }
es6.reflect.delete-property { "android":"67", "ie":"11" }
es6.reflect.get { "android":"67", "ie":"11" }
es6.reflect.get-own-property-descriptor { "android":"67", "ie":"11" }
es6.reflect.get-prototype-of { "android":"67", "ie":"11" }
es6.reflect.has { "android":"67", "ie":"11" }
es6.reflect.is-extensible { "android":"67", "ie":"11" }
es6.reflect.own-keys { "android":"67", "ie":"11" }
es6.reflect.prevent-extensions { "android":"67", "ie":"11" }
es6.reflect.set { "android":"67", "ie":"11" }
es6.reflect.set-prototype-of { "android":"67", "ie":"11" }
es6.regexp.constructor { "android":"67", "edge":"17", "ie":"11" }
es6.regexp.flags { "android":"67", "edge":"17", "ie":"11" }
es6.regexp.match { "android":"67", "edge":"17", "ie":"11" }
es6.regexp.replace { "android":"67", "edge":"17", "ie":"11" }
es6.regexp.split { "android":"67", "edge":"17", "ie":"11" }
es6.regexp.search { "android":"67", "edge":"17", "ie":"11" }
es6.regexp.to-string { "android":"67", "edge":"17", "ie":"11" }
es6.set { "android":"67", "ie":"11" }
es6.symbol { "android":"67", "edge":"17", "ie":"11" }
es7.symbol.async-iterator { "android":"67", "edge":"17", "ie":"11", "ios":"11", "safari":"11.1" }
es6.string.anchor { "ie":"11" }
es6.string.big { "ie":"11" }
es6.string.blink { "ie":"11" }
es6.string.bold { "ie":"11" }
es6.string.code-point-at { "android":"67", "ie":"11" }
es6.string.ends-with { "android":"67", "ie":"11" }
es6.string.fixed { "ie":"11" }
es6.string.fontcolor { "ie":"11" }
es6.string.fontsize { "ie":"11" }
es6.string.from-code-point { "android":"67", "ie":"11" }
es6.string.includes { "android":"67", "ie":"11" }
es6.string.italics { "ie":"11" }
es6.string.link { "ie":"11" }
es7.string.pad-start { "android":"67", "ie":"11" }
es7.string.pad-end { "android":"67", "ie":"11" }
es6.string.raw { "android":"67", "ie":"11" }
es6.string.repeat { "android":"67", "ie":"11" }
es6.string.small { "ie":"11" }
es6.string.starts-with { "android":"67", "ie":"11" }
es6.string.strike { "ie":"11" }
es6.string.sub { "ie":"11" }
es6.string.sup { "ie":"11" }
es6.typed.array-buffer { "android":"67", "ie":"11" }
es6.typed.int8-array { "android":"67", "ie":"11" }
es6.typed.uint8-array { "android":"67", "ie":"11" }
es6.typed.uint8-clamped-array { "android":"67", "ie":"11" }
es6.typed.int16-array { "android":"67", "ie":"11" }
es6.typed.uint16-array { "android":"67", "ie":"11" }
es6.typed.int32-array { "android":"67", "ie":"11" }
es6.typed.uint32-array { "android":"67", "ie":"11" }
es6.typed.float32-array { "android":"67", "ie":"11" }
es6.typed.float64-array { "android":"67", "ie":"11" }
es6.weak-map { "android":"67", "ie":"11" }
es6.weak-set { "android":"67", "ie":"11" }
web.timers { "android":"67", "chrome":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11", "safari":"11.1" }
web.immediate { "android":"67", "chrome":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11", "safari":"11.1" }
web.dom.iterable { "android":"67", "chrome":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11", "safari":"1 36% building modules 222/262 modules 40 active ...ontend\node_modules\moment\locale\s
r.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\API.js] `import '@babel/polyfill'` was not found. 39% building modules 248/279 modules 31 active ...end\node_modules\moment\locale\nl-be.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\registerServiceWorker.js] `import '@babel/polyfill' 40% building modules 251/280 modules 29 active ...ontend\node_modules\moment\locale\ne.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\store.js] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\router.js] `import '@babel/polyfill'` was not found 42% building modules 273/310 modules 37 active ...ontend\node_modules\moment\locale\it.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\plugins\vuetify.js] `import '@babel/polyfill'` was 64% building modules 452/502 modules 50 active ...odules\vue-hot-reload-api\dist\index.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\App.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\node_modules\@kingscode\vuetify-resource\VuetifyResourc 65% building modules 486/527 modules 41 active ...dules\vue-router\dist\vue-router.esm.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Credentials.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Statistics.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Layouts.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\ExcelImport.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\AutomaticImport.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Scanpoints.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Users.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Events.vue] `import '@babel/polyfill'` 65% building modules 492/529 modules 37 active ...nce-system-frontend\src\ResourceText.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\Template.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\AdminTemplate.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\AuthTemplate.vue] `import '@ba 65% building modules 549/592 modules 43 active ...resource\components\ActivityOverlay.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\ResourceText.js] `import '@babel/polyfill'` was not 65% building modules 549/595 modules 46 active ...frontend\src\views\admin\forms\User.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Error404.vue] `import '@babel/polyfill'` was 65% building modules 554/601 modules 47 active ...dex=0&id=03eaa72b&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Error403.vue] `import '@babel/polyfill'` was 64% building modules 557/608 modules 51 active ...ode_modules\axios\lib\helpers\spread.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Settings.vue] `import '@babel/polyfill'` was 64% building modules 563/618 modules 55 active ...dex=0&id=9243dba0&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Scanner.vue] `import '@babel/polyfill'` was n 64% building modules 568/628 modules 60 active ...c\views\admin\forms\AutomaticImport.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Register.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Statistics.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Inventation.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Login.vue] `import '@babel/polyfill'` was not 64% building modules 570/632 modules 62 active ...lateLoader.vue?vue&type=script&lang=js&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\PromoTemplate.vue] `import '@b 64% building modules 571/634 modules 63 active ...&type=template&id=58fcbf25&scoped=true&
[C:\Users\ricar\Projects\event-entrance-system-frontend\node_modules\@kingscode\vuetify-resource\components\Act 64% building modules 573/635 modules 62 active ...nd\src\components\EventAutocomplete.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\mixins\getEvent.js] `import '@babel/polyfill'` was 66% building modules 601/642 modules 41 active ...dex=0&id=2d35bc88&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Event.vue] `import '@babel/polyfi 65% building modules 613/663 modules 50 active ...dex=0&id=dc18dd6e&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\User.vue] `import '@babel/polyfil 65% building modules 617/670 modules 53 active ...dex=0&id=14d57674&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\TemplateLoader.vue] `import '@babel/polyfill'` was 66% building modules 639/683 modules 44 active ...dules\node-libs-browser\mock\process.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Resource.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Credential.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Layout.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Scanpoint.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\AutomaticImport.vue] `import '@ba 66% building modules 643/683 modules 40 active ...dules\node-libs-browser\mock\process.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\EventAutocomplete.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\mixins\getSetting.js] `import '@babel/polyfill'` wa 68% building modules 711/733 modules 22 active ..._modules\axios\lib\core\enhanceError.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\CameraAccessScanner.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\KeyboardAccessScanner.vue] `import '@babel/polyfill'` was not found.
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\PointOfSaleScanner.vue] `import 68% building modules 715/734 modules 19 active ...src\components\importTypes\paylogic.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Form.vue] `import '@babel/polyfil 68% building modules 765/784 modules 19 active ...tawesome-free\webfonts\fa-solid-900.svg
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\importTypes\paylogic.vue] `import '@babe 68% building modules 788/802 modules 14 active ...node_modules\jsbarcode\bin\JsBarcode.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\AccessScanner.vue] `import '@bab 69% building modules 791/802 modules 11 active ...node_modules\jsbarcode\bin\JsBarcode.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\CameraBarcodeScanner.vue] `import '@babe 98% after emitting CopyPlugin
WARNING Compiled with 1 warnings 19:32:33
warning in ./src/views/Statistics.vue?vue&type=template&id=6f2a995d&scoped=true&
Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) <v-list-tile v-for="statistic in statistics">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key f
or more info.
@ ./src/views/Statistics.vue?vue&type=template&id=6f2a995d&scoped=true& 1:0-402 1:0-402
@ ./src/views/Statistics.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.178.161:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.178.161:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
答案 0 :(得分:0)
问题是与es2015不兼容的插件。 之前(可能是在vue cli2中)可能已经将webpack配置为可移植所有node_modules,但这不一定是普遍做法。
在此博客中,您可以了解如何将es6代码发布到npm