2017-05-23 3 views
0

Ich habe eine Anwendung in VueJS geschrieben, die Webpack verwendet, um die Datei bundle.js zu erstellen, um im Browser bereitzustellen. Dies funktioniert gut auf Chrome, aber wenn ich laufen die App auf IE 11, erhalte ich die folgende Fehlermeldung ...Begegnung SCRIPT 1003 Fehler auf IE11 mit Webpack und VueJS

SCRIPT1003: Expected ':' 
bundle.js (23469,9) 

Die Linie 23469 in bundle.js wie folgt aussieht ...

const app = new __WEBPACK_IMPORTED_MODULE_3_vue__["a" /* default */]({ 
    router, 
    render: h => h(__WEBPACK_IMPORTED_MODULE_4__App_vue___default.a) 
}).$mount('#app'); 

Zeile 23469 verweist speziell auf den "Router"

Ich kann nicht ganz herausfinden, was das Problem ist. Jede Hilfe würde sehr geschätzt werden.

+2

Was ist, wenn Sie, 'auf' 'Router ändern Router passiert: Router,' im 'neuen Vue' Konstruktor Objekt? – thanksd

+0

Ich stimme @thanksd zu. Ich denke, IE11 kann ES6-Code nicht ausführen. Hast du dich im Webpack mit ES5 kompiliert? –

+0

Die Pfeilfunktion ist ebenfalls ein Problem, dies wird von EI 11 nicht unterstützt, die Wahrscheinlichkeit ist groß, dass Sie nicht babel verwenden oder wenn die Funktion ein Klassenmitglied ist, wird sie nicht transpiliert. In diesem Fall empfehle ich die Verwendung einer normalen Funktion. Oder fügen Sie Ihrem Webpack ein babel-transform-class-properties-Plugin hinzu, um sie zu konvertieren –

Antwort

0

Das Problem ist, dass Ihre Webpack-Konfiguration keine Polyfills für Browser wie IE11 enthält, die ES6 nicht unterstützen. Die Lösung ist Ihr webpack zu konfigurieren babel-polyfill (source) zu verwenden:

Die Anweisungen sind wie folgt:

  1. Run npm install --save babel-polyfill in Ihrem Projekt-Stammverzeichnis (beachten Sie, dass es sagt --save und nicht - -save-dev, da der polyfills auch zur Laufzeit erforderlich ist)
  2. Fügen Sie babel-polyfill in Ihrer webpack Konfigurationsdatei: require("babel-polyfill");, oder wenn Sie mit ES6: import 'babel-polyfill'
  3. ändern Sie bitte Ihren Eintrittspunkt babel- aufzunehmen Polyfill:

    module.exports = { 
        entry: ["babel-polyfill", "./app/js"] 
    }; 
    
Verwandte Themen