Từ chối lời hứa chưa được xử lý SyntaxError: Dự kiến ​​':' nhận được điều này trên IE11 với dự án vuejs + vuetify


8

Tôi có một dự án trong vuejs + vuetify, dự án đang chạy tốt trên trình duyệt chrome nhưng khi tôi chạy dự án trên Internet Explorer 11 Nó chỉ hiển thị cho tôi các trang phiên và khi tôi nhấn nút đăng nhập thì nó gặp lỗi này

Từ chối lời hứa chưa được xử lý SyntaxError: Dự kiến ​​':'

trong bảng điều khiển và tôi phải nhấn nút đăng nhập hai lần để vào ứng dụng. Ở đây tôi không thấy nội dung chính của trang, chỉ có menu thanh bên được hiển thị và nội dung chính không được hiển thị và tôi lại gặp lỗi trong bảng điều khiển của mình.

Từ chối lời hứa chưa được điều hướng Điều hướng trùng lặp: Không được phép điều hướng đến vị trí hiện tại (/ bảng điều khiển / nhà / thứ gì đó)

Đây là gói.json của tôi

  "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"
  }

Đây là cách tôi nhập babel-polyfill trong tệp main.js của mình

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'
            })
        ]
    }
}

Cú pháp xung quanh nơi xảy ra lỗi cú pháp có thể hữu ích (đây có phải là vấn đề về tên thuộc tính tốc ký không?) Nghe có vẻ như không được phiên mã đúng
SurePerformance

Tôi không biết lỗi cú pháp này xuất phát từ đâu, bởi vì nó chỉ xuất hiện trong IE.
shashi verma

Vào chế độ dev và xem đầu ra của giao diện điều khiển, cần có ánh xạ tới tệp trong đó xảy ra lỗi hoặc ít nhất là một cái gì đó giống như vậy
nonNumericalFloat

Dit bạn cũng @babel/preset-envnhư được đề xuất trên vuetifyjs.com/en/getting-started/browser-support . Tuy nhiên, IE11 có thể đưa ra một số vấn đề với các mẫu. (nếu sử dụng vue-cli-3)
dreijntjens

Bạn có thể đăng mã liên quan (về phần đăng nhập và menu điều hướng thanh bên) để tái tạo vấn đề như trong ví dụ Tối thiểu, Hoàn thành và Xác minh không?
Zhi Lv - MSFT

Câu trả lời:


1

Tôi đã giải quyết vấn đề này bằng cách hạ cấp phiên bản của vue2-dropzone, phiên bản mới nhất của nó có một số vấn đề với IE11 và chuyển "vue2-dropzone" bên trong transpileDependencies của tệp webpack của bạn.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.