[Vue.js 3] Vue I18n 설치

언어 선택에 따라 UI 전체적으로 번역이 필요할 땐 I18n이라는 것이 있다며 배움을 받았기에 기록하고자 한다.

 

Vue.js 2로 살다가 오랜만에 Vue.js 3으로 넘어왔다.

 

일단 Vue.js3 프로젝트를 만들자.

프로젝트(폴더) 이름은 혼자 할거니까 대충 지어주자

 

내가 맘대로 체크 하려고 선택

 

내가 편한대로 함.

 

버전은 3.x

 

편한대로 설정하고 마지막 질문게 그냥 enter침

 

설치 중

 

설치 완료

 

만들었으니 열어봄

 

npm install 할거 다 한 다음 vue add i18n 입력할거다.

나는 axios만 설치할거임.

 

npm install vue-i18n도 있긴 하다만 내가 사용할건 이거임. vue add i18n 입력 후 고민말고 y

 

Enter

 

Enter

 

Enter

 

y

 

완료

 

이게 끝나면 main.js에 추가된 것을 확인할 수 있다.

i18n.js 파일도 추가되었다.

localses 폴더와 안에 en.json 파일도 추가되었다.

영어 외에 다른 언어가 필요할 땐 en.json을 복사하여 같은 폴더에 추가하면 된다.

 

2022.04.04 설치 시 오류 발생 해결 방법

i18n을 이것저것 해놓고 중간에 설치하게 되면 모듈 에러가 와장창 발생하게 된다.

침착하게 해당 프로젝트 폴더에서 터미널을 열고

rm node_modules

 를 입력하여 전체 삭제 후

프로젝트에서 다시

npm install

하면 정상 작동된다.