javascript - 未处理的承诺拒绝 SyntaxError: Expected ':' get this on IE11 with vuejs+ vuetify project
问题描述
我在 vuejs + vuetify 中有一个项目,该项目在 chrome 浏览器上运行良好,但是当我在 Internet Explorer 11 上运行该项目时,它只显示会话页面,当我点击登录按钮时,它给了我这个错误
未处理的承诺拒绝 SyntaxError: Expected ':'
在控制台中,我必须按两次登录按钮才能进入应用程序。在这里,我看不到页面的主要内容,只显示侧边栏菜单并且未呈现主要内容,并且我的控制台再次出现错误,即
未处理的承诺拒绝 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'
})
]
}
}
解决方案
我通过降级 vue2-dropzone 的版本解决了这个问题,它的最新版本与 IE11 存在一些问题,并在 webpack 文件的 transpileDependencies 中传递了“vue2-dropzone”。
推荐阅读
- google-cloud-dataflow - 并行运行相同的 DF 模板会产生奇怪的结果
- node.js - Sequelize 不返回对象,而是返回额外数据
- git - Jenkinsfile:git文件夹
- specflow - SpecFlow Jenkins 运行寻找 NewtonSoft v9.0.0.0 失败
- c++ - 生成两个随机数,使一个总是大于另一个
- java - Android:交付结果失败,找不到具有权限的提供者的元数据
- python - 熊猫 dropna() 仅当在第一行 NaN 值时
- r - 有没有办法在我们通过重定向 url 传递的 RShiny 应用程序中获取 cookie 值
- javascript - JavaScript:Array.push() 与文字(括号)表示法
- symfony - Doctrine 类映射继承和连接