未処理のプロミス拒否SyntaxError:Expected ':'これをIE11でvuejs + vuetifyプロジェクトで取得


8

vuejs + vuetifyにプロジェクトがありますが、プロジェクトはChromeブラウザーで正常に実行されていますが、Internet Explorer 11でプロジェクトを実行すると、セッションページしか表示されず、ログインボタンをクリックすると、このエラーが発生します

未処理のプロミス拒否SyntaxError:予期された ':'

コンソールで、アプリに入るにはログインボタンを2回押す必要があります。ここでは、ページのメインコンテンツが表示されず、サイドバーメニューのみが表示され、メインコンテンツがレンダリングされず、コンソールにエラーが表示されます。

未処理のプロミス拒否NavigationDuplicated:現在の場所(/ dashboard / home / something)へのナビゲートは許可されていません

これは私のpackage.jsonです

  "dependencies": {
    "@types/leaflet": "^1.5.1",
    "algoliasearch": "^3.33.0",
    "amcharts3": "^3.21.14",
    "auth0-js": "^9.11.3",
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.8.0",
    "echarts": "^4.2.1",
    "firebase": "^6.4.2",
    "instantsearch.css": "^7.3.1",
    "jquery": "^3.4.1",
    "leaflet": "^1.4.0",
    "moment": "^2.22.2",
    "nprogress": "^0.2.0",
    "screenfull": "^4.2.1",
    "slick-carousel": "^1.8.1",
    "velocity-animate": "^1.5.2",
    "vue": "^2.6.10",
    "vue-chartjs": "^3.4.2",
    "vue-count-to": "^1.0.13",
    "vue-croppa": "^1.3.8",
    "vue-draggable-resizable": "^2.0.0-rc1",
    "vue-echarts": "^4.0.3",
    "vue-fullcalendar": "^1.0.9",
    "vue-fullscreen": "^2.1.5",
    "vue-i18n": "^8.14.0",
    "vue-instantsearch": "^2.3.0",
    "vue-loading-spinner": "^1.0.11",
    "vue-notification": "^1.3.16",
    "vue-perfect-scrollbar": "^0.2.0",
    "vue-quill-editor": "^3.0.6",
    "vue-radial-progress": "^0.2.10",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.1.2",
    "vue-slick": "^1.1.15",
    "vue-star-rating": "^1.6.1",
    "vue-tour": "^1.1.0",
    "vue-video-player": "^5.0.2",
    "vue-wysiwyg": "^1.7.2",
    "vue2-breadcrumbs": "^2.0.0",
    "vue2-dragula": "^2.5.4",
    "vue2-dropzone": "^3.6.0",
    "vue2-google-maps": "^0.10.7",
    "vue2-leaflet": "^2.2.1",
    "vuedraggable": "^2.20.0",
    "vuetify": "^2.0.11",
    "vuex": "^3.0.1",
    "weather-icons": "^1.3.2",
    "webpack": "^4.39.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "deepmerge": "^4.0.0",
    "fibers": "^4.0.1",
    "sass": "^1.22.10",
    "sass-loader": "^7.3.1",
    "vue-template-compiler": "^2.6.10"
  }

これは、main.jsに babel-polyfillをインポートする方法です

import 'babel-polyfill';
import Vue from 'vue'
import vuetify from '@/plugins/vuetify'
import * as VueGoogleMaps from 'vue2-google-maps'
import { Vue2Dragula } from 'vue2-dragula'
import VueQuillEditor from 'vue-quill-editor'
import wysiwyg from 'vue-wysiwyg'
import VueBreadcrumbs from 'vue2-breadcrumbs'

babel.config.js

module.exports = {
  presets: [
    ["@vue/app", {
      modules: "commonjs"
    }]
  ]
}

vue.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    publicPath: process.env.NODE_ENV == 'production' ? '/' :  '/',
    css: {
        sourceMap: true
    },
    productionSourceMap: false,
    transpileDependencies: [
        /\/node_modules\/vuetify\//,
        /\/node_modules\/vue-echarts\//,
      /\/node_modules\/resize-detector\//
    ],
    configureWebpack: {
          resolve: {
            alias: {
                Api: path.resolve(__dirname, 'src/api/'),
                Components: path.resolve(__dirname, 'src/components/'),
                Constants: path.resolve(__dirname, 'src/constants/'),
                Container: path.resolve(__dirname, 'src/container/'),
                Views: path.resolve(__dirname, 'src/views/'),
                Helpers: path.resolve(__dirname, 'src/helpers/'),
                Themes: path.resolve(__dirname, 'src/themes/')
            },
            extensions: ['*', '.js', '.vue', '.json']
        },
        plugins: [
              //jquery plugin
            new webpack.ProvidePlugin({
                $: 'jquery',
                jquery: 'jquery',
                'window.jQuery': 'jquery',
                jQuery: 'jquery'
            })
        ]
    }
}

構文エラーが発生する場所の構文はおそらく役に立ちます(これはプロパティ名の省略形の問題ですか?)何かが正しく変換されていないように聞こえます
特定のパフォーマンス

この構文エラーはIEでのみ発生するため、どこから発生するのかわかりません。
shashi verma

開発モードに入り、コンソール出力を確認します。エラーが発生したファイルへのマッピング、または少なくともそのようなもの
nonNumericalFloat

また、あなたのDIT @babel/preset-envに提案されたようvuetifyjs.com/en/getting-started/browser-support。それでもIE11はテンプレートにいくつかの問題を引き起こす可能性があります。(vue-cli-3を使用している場合)
dreijntjens

関連するコード(ログイン部分とサイドバーメニューのナビゲーション部分について)を投稿して、最小、完全、および検証可能な例のように問題を再現できますか?
Zhi Lv-MSFT

回答:


1

vue2-dropzoneのバージョンをダウングレードすることでこの問題を解決しました。最新バージョンではIE11にいくつかの問題があり、webpackファイルのtranspileDependencies内に「vue2-dropzone」を渡します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.