web-dev-qa-db-ja.com

VUE IE-3で動作しないCLI-3プロジェクト

Vue-cli3を使用してvuejsでプロジェクトを作成しました。 chromeブラウザで正常に動作しますが、IE-11バージョンでは空白の画面が表示され、このリンクで説明されているようにコンソールに次のエラーが表示されます。 https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view？usp = drivesdk 上記のスクリーンショットで指摘したコンソールエラーをクリックすると、指定されたリンクに画面が表示されます https://drive.google.com/ file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view？usp = drivesdk mini-toastrパッケージのエラー：ここに私のbabel.config.jsファイルコードがあります：

module.exports = {
  presets: [
   ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

および.browserslistrcファイルコード：

> 1%
last 2 versions
not ie <= 8

私はどこでミスをしているのかわかりません。不足しているものはありますか？さらに情報が必要な場合はお知らせください。ありがとう！

vuejs2vue-cli-3
8
Sukhpal Singh

私はついに上記の問題の解決策を見つけました。 IE-11バージョンでプロジェクトを実行するには、次の2つの手順に従ってください。

  1. コマンド「npm install --save babel-polyfill」を使用してbabel-polyfillをインストールします。
  2. インポートされたすべてのパッケージの上部にあるmain.jsまたはindex.jsファイルにbabel-polyfillをインポートします。例：main.jsファイルです。

注：最後にbabel-polyfillをインポートしても機能しません。

import 'babel-polyfill'  
import Vue from 'vue'
import Vuetify from 'vuetify'

import router from './router'
// include script file
import './lib/DemoScript'

// include all css files
import './lib/DemoCss'

Vue.use(Vuetify)

new Vue({
    store,
    router,
    render: h => h(App),
    components: { App }
}).$mount('#app')
10
Sukhpal Singh

別のソリューション：vue-cli-3のパワーを使用してブラウザーサポートを活用します。 https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode

ビルド時のオプションは1つだけで、サポートするブラウザリストを選択したら完了です:-)

これは、アプリの構築に適しています。

1
barbara.post