Sobes.tech
Middle

Ի՞նչ եք անելու, եթե Vue նախագիծը չի աշխատում Internet Explorer 11-ում։

sobes.tech AI

Պատասխան AI-ից

Կանխատեսում եմ, որ անհրաժեշտ կլինի ստուգել պոլիֆիլների առկայությունը՝ նախևառաջ core-js և regenerator-runtime, որոնք միացված են @babel/preset-env-ի միջոցով։ Համոզվեք, որ դրանք ներմուծված են ծրագրի գլխավոր ֆայլում (main.js կամ նմանը):

Կանխատեսում եմ, որ անհրաժեշտ կլինի ստուգել Babel-ի կարգավորումները՝

  • նպատակային միջավայրերը (targets) .babelrc կամ babel.config.js-ում պետք է ներառեն IE 11-ը։
  • համոզվեք, որ օգտագործվում է useBuiltIns տարբերակը usage կամ entry, որպեսզի ավտոմատ կերպով ներառվեն անհրաժեշտ պոլիֆիլները։
// babel.config.js
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      useBuiltIns: 'usage', // կամ 'entry'
      corejs: 3,
      targets: {
        ie: '11',
        // ... այլ բրաուզերներ
      }
    }]
  ]
};

Կանխատեսում եմ, որ անհրաժեշտ կլինի վերլուծել IE 11-ի կոնսոլում հայտնվող սխալները՝ Սա լավագույն միջոցն է որոշելու կոնկրետ խնդիրները՝ օրինակ՝ հնացած կամ բացակա API-ների օգտագործում, ES6+ սինտաքսի սխալներ, որոնք չեն փոխարկվել։

Կանխատեսում եմ, որ անհրաժեշտ կլինի ստուգել կախվածությունները՝ Որոշ երրորդ կողմի գրադարաններ կարող են օգտագործել ժամանակակից սինտաքսիս կամ API-ներ առանց համապատասխան պոլիֆիլների։ Կարող է անհրաժեշտ լինել որոնել այլ տարբերակներ, պոլիֆիլներ կամ պայմանական բեռնում։

Կանխատեսում եմ, որ անհրաժեշտ կլինի ուսումնասիրել Vue-ի պաշտոնական փաստաթղթերը IE11-ի աջակցման մասին՝ Vue-ն ունի իր առանձնահատկությունները IE11-ի հետ աշխատելիս, օրինակ՝ ռեակտիվության և կոմպոնենտների հետ կապված։ Կարող է անհրաժեշտ լինել հատուկ կարգավորումներ կամ շրջանցումներ։

Կանխատեսում եմ, որ անհրաժեշտ կլինի ստուգել CSS-ը՝ Որոշ ժամանակակից CSS հատկություններ կամ սելեկտորներ կարող են չաջակցվել IE11-ում։ Պետք է օգտագործել նախածանցներ (-ms-) կամ այլընտրանքային մոտեցումներ (օրինակ՝ Flexbox-ի պոլիֆիլներով, Grid-ի ավտոմատ նախածանցներով)։

Կանխատեսում եմ, որ անհրաժեշտ կլինի ստուգել Server-Side Rendering (SSR)-ի օգտագործումը՝ Եթե նախագիծը օգտագործում է SSR, կարող են առաջանալ հատուկ խնդիրներ հիդրատացիայի հետ IE11-ում։

Հնարավոր խնդիրներ և դրանց լուծումներ՝

Խնդիր Լուծում
Promise, Fetch, Symbol և այլն բացակայում են Համոզվեք, որ @babel/preset-env-ը ճիշտ configured է core-js-ի հետ։
ES մոդուլների ներմուծման խնդիրներ Ստուգեք, որ Webpack կամ Rollup ճիշտ հավաքում է կոդը IE11-ի համար։
Անհամատեղ սինտաքսիս (օրինակ՝ async/await առանց փոխարկման) Համոզվեք, որ Babel-ն ճիշտ փոխարկում է կոդը։
Vue-ում ռեակտիվության խնդիրներ Դժվար դեպքերում կարող են անհրաժեշտ լինել շրջանցումներ, ինչպես նկարագրված է Vue-ի փաստաթղթերում IE11-ի համար։
CSS խնդիրներ (Flexbox, Grid, անհատական հատկություններ) Օգտագործեք ավտոմատ նախածանցներ, այլընտրանքային հատկություններ կամ պոլիֆիլներ CSS-ի համար։

Հետո փոփոխությունների, մանրամասն փորձարկում եմ կատարում IE 11-ում՝ օգտագործելով DevTools և էմուլյատոր։