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
—
dreijntjens
@babel/preset-env
に提案されたようvuetifyjs.com/en/getting-started/browser-support。それでもIE11はテンプレートにいくつかの問題を引き起こす可能性があります。(vue-cli-3を使用している場合)
関連するコード(ログイン部分とサイドバーメニューのナビゲーション部分について)を投稿して、最小、完全、および検証可能な例のように問題を再現できますか?
—
Zhi Lv-MSFT