카테고리

질문 & 답변
세부 분야

프로그래밍 언어
해결 여부

미해결

vue ie11 지원

21.07.07 15:22 작성 조회수 378

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 
- 먼저 유사한 질문이 있었는지 검색해보세요. 
- 서로 예의를 지키며 존중하는 문화를 만들어가요. 
- 잠깐! 인프런 서비스 운영 관련 문의는 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
모르는게 많아 질문도 어떻게 드려야 할지 몰라 혹시 추가로 알아야 하는 사항이 있으면 말씀부탁드립니다.