vue.js + vue-cli + TypeScript + vuetifyプロジェクトをIE 11で実行するために数日かけてセットアップしましたが、成功しませんか?
私はそれをどのようにすべきかを説明しているが成功しなかった多くの投稿をネット上で見つけました。私は以下で説明する設定をほぼすべての方法で組み合わせようとしましたが、成功せず、空白ページまで多くの異なるエラーで終わっていました
アプリケーションは正常に動作しますChromeまたはFF
誰かがそのようなアプリケーションをIE 11で実行している場合、それは大歓迎です
Context(すべての最新バージョン):
私がbabel/webpack devの初心者なので、質問が愚かであるとしたら、ご容赦ください。
私が試したことと質問:(私は以下のほとんどすべての組み合わせを試しました)
npm install babel-polyfill --save
を使用する必要がありますか?import 'babel-polyfill'
inmain.ts
を追加する必要がありますか?import '@babel/polyfill'
inmain.ts
ここで説明npm install @babel/preset-env --save-dev
を使用する必要がありますか、それともvue-cli
が使用されているため不要ですか?inbabel.config.js
、vue-cliによって最初に作成されたコンテンツを置き換える必要がありますか
presets: [
'@vue/app'
]
presets: ['@babel/preset-env']
または(多くの場所で見られるように)?
presets: [['@vue/app', useBuiltIns: 'entry' }]]
または2つのプリセットを追加しますか?
presets: [
['@babel/preset-env'],
['@vue/app', useBuiltIns: 'entry' }]
]
ここで説明 のようなプラグインを追加する必要がありますか?
presets: ['@vue/app'],
plugins: ['@babel/transform-modules-commonjs']
または、次のように変更します vueドキュメントの説明 ?
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
invue.config.js
、追加しますか?
transpileDependencies: [
'vuetify',
'vue-i18n',
'vuelidate',
'axios'
]
[SOLUTION 2019-06-25]
ようやく動作しました。@ blackeningからの回答は非常に役に立ちました。また、IE 11でgoogle"reCaptcha"
のjavsacriptエラーが発生し、次のセットアップ後に消えました。
前提条件として、vue-cli
がインストールされており、プロジェクトは['自動検出されたポリフィルにTypeScriptと一緒にバベルを使用する]を選択して作成されます。
1)installcore-js@3
npm install core-js@3
2)editmain.ts
like this:
import 'core-js/stable'
import Vue from 'vue'
import '@/plugins/vuetify'
{...}
3)editbabel.config.js
module.exports = {
presets: [
['@vue/app', { useBuiltIns: 'entry' }]
]
}
以上です !
今、IE 11 CSSと戦っていますが、それは既知の話です...例として、IEにのみスタイルを適用するinvue
は、次のようにコーディングしてください
<style scoped>
/* Only for IE 11, wrap div text */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ieMaxWidth90 {
max-width: 90vw; /* 90% view width */
}
}
</style>
npm install --save core-js
Main.jsの上の2行:
import "core-js/stable";
import "regenerator-runtime/runtime";
Vue.config.jsで:
module.exports = {
...,
transpileDependencies: ['vuetify']
}