Как настроить vue-cli с проектом vuetify для работы с IE 11? - PullRequest
Новая
       32

Как настроить vue-cli с проектом vuetify для работы с IE 11?

0 голосов
/ 20 июня 2019

Я провожу несколько дней, чтобы настроить проект vue.js + vue-cli + typescript + vuetify для работы с IE 11 безуспешно?

Я нашел много постов в сети, которые объясняют, как это должно быть сделано, но безуспешно.Я попытался объединить почти все возможные способы, описанные ниже, но безуспешно, с множеством разных ошибок, вплоть до пустой страницы

Приложение работает нормально с Chrome или FF

Если у кого-то есть такое приложение, работающее в IE 11, оно будет высоко оценено

Context (все последние версии):

  • vue-cli
  • машинопись
  • vue.js + vue-router + vuex + vuex-persistedstate
  • vuetify + vue-i18n + vuelidate
  • axios

Извините, если какой-то вопрос кажется глупым, так как я довольно новичок в разработке babel / webpack ..

Что я пробовал и вопросы : (Япопробовал почти все комбинации в следующем)

  • Должен ли я использовать npm install babel-polyfill --save, как описано в vuetify setup для IE 11 здесь ?
  • Должен ли я добавить import 'babel-polyfill' в main.ts, как объяснено в настройке vuetify для IE 11 здесь ?
  • Или я должен добавить import '@babel/polyfill' в main.ts как объяснено здесь
  • Должен ли я использовать npm install @babel/preset-env --save-dev, как объяснено в настройке vuetify для IE 11 здесь или это не нужно из-за использования vue-cli?

  • в babel.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'
  ]
  }]
 ]

  • в vue.config.js, следует добавить? 

    transpileDependencies: [
  'vuetify',
  'vue-i18n',
  'vuelidate',
  'axios'
]

[РЕШЕНИЕ 2019-06-25]
Наконец-то все заработало, ответ от @blackening был очень полезным Это случилосьтакже, что у нас были ошибки javsacript в IE 11 с google "reCaptcha", которые исчезли после следующей настройки:

В качестве предварительного условия, vue-cli установлен, и проект создается путем выбора `'Использовать Babel вместе с TypeScriptдля автоматически обнаруженных полифилов

1) установить core-js@3

    npm install core-js@3

2) отредактировать main.ts так: 

    import 'core-js/stable'
    import Vue from 'vue'
    import '@/plugins/vuetify'
    {...}

3) отредактировать babel.config.js

    module.exports = {
      presets: [
        ['@vue/app', { useBuiltIns: 'entry' }]
      ]
    }

И это все!
Сейчас мы боремся с IE 11 CSS, но это известная история ... Например, в vue для применения стиля только к IE,просто закодируйте это так 

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

Ответы [ 2 ]

2 голосов
/ 20 июня 2019

Я сделаю частичный ответ.

1) В vue-cli включены предустановки @ vue / app и babel.

https://cli.vuejs.org/guide/browser-compatibility.html#polyfills

Это четко указано в документации vue-cli. Но это также указывает:

"Если для одной из ваших зависимостей нужны полифилы, у вас есть несколько вариантов:

Если зависимость записана в версии ES, которую целевые среды не поддерживают: добавьте эту зависимость к параметру transpileDependencies в vue.config.js"

2) Вам по-прежнему необходимо помещать заполнение babel в каждый входной файл.

Традиционно: import '@babel/polyfill' в вашем main.ts.

Что делает babel-preset-env, так это то, что он обнаруживает ваш список браузеров , а затем заменяет эту строку на те полифилы, которые он сочтет необходимыми.

3) @ babel / polyfill устарела. Кто знал.

Некоторым людям нужны сверхпрочные полифилы. Это я. Потому что интернет-взломщик в office-js + слишком привык к новейшей технологии. Вот тут и приходит core-js @ 3.

Для этой цели моя сборка веб-пакета полностью адаптирована. Но я вырвал его из Vue-Cli и изменил оттуда.

Мой конфиг загрузчика babel: 

const BABEL_LOADER = {
    loader: 'babel-loader',
    options: {
        plugins: ['@babel/plugin-syntax-dynamic-import'],
        presets: [
            // '@vue/app',
            ['@babel/preset-env', {
                targets: {
                    ie: '11',
                    browsers: 'last 2 versions',
                },
                useBuiltIns: 'usage',
                corejs: { version: 3, proposals: true },
            }],
        ],
    },
};

Это верхняя часть моего входного файла: 

import Vue from 'vue';
import App from './App.vue';


// ------------ Polyfill ------------
import 'core-js/stable';

core-js заменяет @ babel / polyfill.

Подробнее о core-js: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md

0 голосов
/ 20 июня 2019

Согласно этому руководству , после установки vuetify используйте следующую команду: 

npm install vuetify --save

Затем импортируйте Vuetify в файл main.ts, например: 

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);
Vue.config.productionTip = false;

После этого, используя эту команду для установки babel-polyfill: 

npm install --save babel-polyfill

Затем добавьте импорт в начало файла main.ts, получив окончательный код, как показано ниже: 

import 'babel-polyfill';
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);
Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

Наконец, используя команду «npm run serve» для запуска приложения, она хорошо работает в IE 11.

...