vue ie11 지원

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. vue, typescript 사용 중에 ie11에서 화면이 안나오고 있어서 문의드립니다. javascript1002 에러가 나타나고 있으며, 현상은 아래 url의 화면과 동일합니다. https://jacklyons.me/how-to-fix-vuejs-not-working-in-ie11/ 플러그인은 크게 ui프레임웍 quasar를 쓰고 있는 정도이며, package.json 아래와 같이 사용하고 있습니다. "dependencies" : { "@quasar/extras" : "^1.0.0" , "@sentry/browser" : "^5.15.5" , "@sentry/integrations" : "^5.15.5" , "@shopify/draggable" : "^1.0.0-beta.8" , "animate.css" : "^4.1.0" , "axios" : "^0.19.0" , "core-js" : "^3.1.2" , "konva" : "^4.0.16" , "libphonenumber-js" : "^1.7.38" , "lodash" : "^4.17.15" , "moment" : "^2.24.0" , "moment-range" : "^4.0.2" , "quasar" : "^1.11.3" , "query-string" : "^6.12.1" , "register-service-worker" : "^1.6.2" , "v-calendar" : "^1.0.0-beta.23" , "validator" : "^12.1.0" , "vue" : "^2.6.10" , "vue-axios" : "^2.1.5" , "vue-bounce" : "^1.1.0" , "vue-class-component" : "^7.0.2" , "vue-infinite-loading" : "^2.4.4" , "vue-konva" : "^2.0.11" , "vue-loaders" : "^3.0.2" , "vue-multiselect" : "^2.1.6" , "vue-online-2" : "^2.2.0" , "vue-pinch-zoom" : "^1.0.1" , "vue-property-decorator" : "^8.1.0" , "vue-router" : "^3.0.3" , "vue-scroll-sync" : "^1.0.5" , "vue-uuid" : "^1.1.1" , "vuex" : "^3.0.1" , "vuex-class" : "^0.3.2" }, "devDependencies" : { "@babel/plugin-proposal-optional-chaining" : "^7.7.5" , "@bahmutov/add-typescript-to-cypress" : "^2.1.2" , "@cypress/webpack-preprocessor" : "^5.4.1" , "@types/chai" : "^4.1.0" , "@types/lodash" : "^4.14.149" , "@types/mocha" : "^5.2.4" , "@types/moment-range" : "^4.0.0" , "@types/uuid" : "^3.4.6" , "@types/validator" : "^12.0.1" , "@vue/cli-plugin-babel" : "^4.0.3" , "@vue/cli-plugin-e2e-cypress" : "^4.0.3" , "@vue/cli-plugin-eslint" : "^4.0.3" , "@vue/cli-plugin-pwa" : "^4.1.1" , "@vue/cli-plugin-typescript" : "^4.0.3" , "@vue/cli-plugin-unit-mocha" : "^4.0.3" , "@vue/cli-service" : "^4.0.3" , "@vue/eslint-config-prettier" : "^5.0.0" , "@vue/eslint-config-typescript" : "^4.0.0" , "@vue/test-utils" : "^1.0.0-beta.29" , "babel-eslint" : "^10.0.1" , "babel-plugin-transform-imports" : "1.5.0" , "chai" : "^4.1.2" , "console-panel" : "^1.0.4" , "cypress" : "4.12.1" , "cypress-intellij-reporter" : "^0.0.4" , "eslint" : "^5.16.0" , "eslint-plugin-prettier" : "^3.1.0" , "eslint-plugin-vue" : "^5.0.0" , "lint-staged" : "^10.0.0-0" , "mochawesome" : "^6.1.1" , "mochawesome-merge" : "^4.1.0" , "node-sass" : "^4.9.0" , "prettier" : "^2.0.5" , "sass-loader" : "^7.1.0" , "stylus" : "^0.54.5" , "stylus-loader" : "^3.0.2" , "ts-loader" : "^7.0.5" , "typescript" : "^3.4.3" , "vue-cli-plugin-quasar" : "^2.0.0" , "vue-template-compiler" : "^2.6.10" , "vuex-module-decorators" : "^0.10.1" , "webpack" : "^4.43.0" }, "prettier" : { "singleQuote" : true , "arrowParens" : "always" , "trailingComma" : "none" , "jsxBracketSameLine" : true , "htmlWhitespaceSensitivity" : "css" }, "postcss" : { "plugins" : { "autoprefixer" : {} } }, "browserslist" : [ "> 1%" , "last 2 versions" ], "gitHooks" : { "pre-commit" : "lint-staged" }, "lint-staged" : { "*.{ts,tsx,*.vue}" : [ "vue-cli-service lint --fix" , "git add" ], "*.{ts,tsx,*.vue,*.scss,*.css}" : [ "prettier --write" , "git add" ] } plugin 좀 더 자세한 내용은 아래와 같습니다. import Vue from 'vue' ; import { Quasar } from 'quasar' ; import './push' ; import VueAxios from 'vue-axios' ; import axios from './axios' ; import VueKonva from 'vue-konva' ; // @ts-ignore import VueLoaders from 'vue-loaders' ; import 'vue-loaders/dist/vue-loaders.css' ; import InfiniteLoading from 'vue-infinite-loading' ; // @ts-ignore import VCalendar from 'v-calendar' ; // @ts-ignore import Bounce from 'vue-bounce' ; import * as Sentry from '@sentry/browser' ; import { Vue as VueIntegration } from '@sentry/integrations' ; import PinchZoom from 'vue-pinch-zoom' ; import 'animate.css' ; // vue-axios : rest 통신용 라이브러리 Vue . use ( VueAxios , axios ); // vue-konva : svg 좌석 그리는 용도 Vue . use ( VueKonva ); // vue-loaders : 로더 모양 (추후 필요 없으면 삭제) Vue . use ( VueLoaders ); // vue-infinite-loading : list 무한 스크롤 // @ts-ignore Vue . use ( InfiniteLoading , { slots : { noMore : Quasar . lang . props . msg . noMore , noResults : '' } }); // Use v-calendar & v-date-picker components Vue . use ( VCalendar , { isDark : true }); // vue-bounce, ios scroll bounce handler Vue . use ( Bounce ); Vue . component ( 'pinch-zoom' , PinchZoom ); // sentry if ( process . env . NODE_ENV !== 'development' ) { Sentry . init ({ dsn : 'https://b22383345c094318a3ca4cc89cdac858@o389025.ingest.sentry.io/5226673' , integrations : [ new VueIntegration ({ Vue , attachProps : true }), new Sentry . Integrations . GlobalHandlers ({ onerror : false , onunhandledrejection : false }) ] }); } 이 상태에서 아래 url 에서의 상황을 실행해봐도 잘안되고 있습니다. https://program-error-review.tistory.com/32 모르는게 많아 질문도 어떻게 드려야 할지 몰라 혹시 추가로 알아야 하는 사항이 있으면 말씀부탁드립니다.

캡틴판교 · Answer

안녕하세요 요한님, 자세한 내용 첨부해 주셔서 감사합니다. 그럼 빌드 후 IE에서 돌렸을 때 어떤 에러가 나는지 로그 까지 첨부해 주실 수 있을까요? IE 개발자 도구에서 나는 에러를 보셔야 할 것 같아요. 위 첨부해주신 설정에는 크게 문제가 없어보입니다.