Vue.js 에서 Safari 호환시키기

Vue.js 에서 Safari 호환시키기

앞서,

이 글은 아래와 같은 환경에서 작업된 글이에요.
혹시라도 버전이 다르면 문제가 생길 수 있으니 조심해주세요.

  • 운영체제: MacOS Catalina 10.15.2
  • Node.js: v12.14.0
  • Vue Cli: 4.1.2

현재 진행하고 있는 프로젝트가 거의 마무리 되가고 있는 시점이었어요. 안드로이드에서는 워낙 잘 작동되서 문제 없겠거니 하면서 마무리하고 있었어요. 화면이 작으면 이상해지려나 테스트해볼 겸 아이폰으로 접속해봤더니 안되더라구요. 해결 방법을 찾았는데 조금식 달라서 정리해보려고 해요.


1. Babel Polyfill 설치

polyfill 을 설치하면 호환이 안되는 웹엔진까지 호환을 시켜줄 수 있다고 해요.

NPM 사용시, 아래와 같이 입력해주세요.
npm install @babel/polyfill
YARN 사용시, 아래와 같이 입력해주세요.
yarn add @babel/polyfill

2. main.js 에 적용

일단 먼저 Vue.js 소스안에 Polyfill 를 적용시켜줘야 해요.

...import 생략

Vue.config.productionTip = false;

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

기존에 위에 처럼 되어 있었다면 아래처럼 수정해주세요.

import '@babel/polyfill';
... import 생략

Vue.config.productionTip = false;

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

이렇게 되면 일단 소스 상으로는 작업이 끝났어요. 쉽죠?


3. vue.config.js 에 적용

이제 마지막으로 vue.config.js 에 설정을 조오금만 수정해주면 되요.

참고!! 3.0 버전부터는 vue.config.js 가 기본적으로 생성되지 않아요. 만약에 존재하지 않다면 파일을 만들어서 작성해주세요!

module.exports = {
  configureWebpack: {
    entry: ['@babel/polyfill', './src/main.js']
  }
};

이렇게 작성만 해주셨다면 이제 모두 작업이 끝났어요.

4. 아직 안되는데요?

아마 대부분은 3번까지 작업하시면 해결되실거에요. 저의 경우는 조금 특이한 케이스라 그런 건지 위 내용으로는 적용 안되서 조금 더 찾아보니 스타일 문제라고 하네요. 아래처럼 CSS 속성을 넣어주면 말끔하게 해결이 될 거에요.

input,
input:before,
input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}
Join the discussion

반가워요.

Node.js, Python, Java, C#
HTML, JavaScript
( BACKEND – FRONTEND )

중졸, 고졸 모두 끝내고
별짓 다해보는 학생입니다. 😀