본 가이드는 vue vue2→vue3 migration 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다.
https://vuejs.org/#breaking-changes
https://ui.toast.com/weekly-pick/ko_20200804
https://webpack.kr/configuration/dev-server/#devserver
https://v3-migration.vuejs.org/migration-build.html#installation
https://www.vuemastery.com/blog/vue-3-migration-build/
https://github.com/logaretm/vee-validate/issues/3438 //vee-validate 3 to 4 migration is failed
Vue2 단점: 제한된 typescript 지원, 성능 병목 현상, 까다로운 유지 보수, 제한된 스케일링 성능
Vue3 특징: 성능, 가독성, 유지 보수, 보안 향상을 위해 아키텍처와 함수를 변경
개요: Vue 3에는 새 글로벌 API, 새 컴퍼지션 API, 템플릿 지시문 변경 내용, 렌더링 기능 API 변경 내용 같은 기본 아키텍처 변경 내용을 포함하여 많은 변경 내용이 있다.
주요 호환성 이슈:
전역 앱생성 구문, 컴포넌트 정의, 데이터 정의방식, v-for/v-if 우선순위, 라우터, vuex
사용가능 도구:
마이그레이션 빌드 :
이 빌드는 기본적으로 Vue 2 모드에서 실행되므로 대부분의 공용 API(몇 개 제외)가 정확히 Vue 2처럼 동작합니다. 기능이 변경되었거나 더 이상 사용되지 않는 경우 마이그레이션 빌드에서 런타임 경고를 생성합니다. 개발자가 각 컴포넌트의 호환성을 활성화하거나 비활성화할 수도 있습니다
마이그레이션 빌드는 전체 응용 프로그램을 재작성하지 않고도 응용 프로그램을 버전 2에서 버전 3으로 전환하는 데 도움이 됩니다. 이 기능을 위해 Vue 3에서 호환성이 손상되는 변경 내용을 포함하여 Vue 2 응용 프로그램을 있는 그대로 실행합니다. 나중에 경고를 throw하여 변경해야 하는 코드를 표시합니다. 이 빌드는 Vue 3 준수를 위해 Vue 2 앱을 변경하는 더 원활하고 쉬운 방법을 제공합니다. 마이그레이션 빌드는 Vue 2 특정 라이브러리와 사용되지 않는 API를 처리하지 않습니다.
마이그레이션 빌드는 이상적인 장기 솔루션이 아니라 업그레이드를 위한 중간 솔루션으로 사용할 수 있습니다. 하지만 필요한 경우 설명서에 따라 프로덕션 응용 프로그램에 사용할 수 있습니다. “마이그레이션 빌드에서 앱이 실행되는 경우 마이그레이션이 완료되기 전에 프로덕션에 마이그레이션 빌드를 제공할 수 있습니다. 약간의 성능/크기 오버헤드는 있지만 프로덕션 UX에 눈에 띄는 영향을 주지는 않습니다.”
응용 프로그램이 외부 라이브러리를 사용하는 경우 응용 프로그램을 마이그레이션하기 전에 Vue 3 호환 버전을 기다리는 것이 가장 좋습니다.
변경필요영역
- 설치파일 :
1. CLI 최신버전으로 업데이트 - 라이브러리(package.json) :
1. @vue/compat, @vue/compiler-sfc 라이브러리 추가 (마이그레이션용 컴파일러)
2. vue-template-compiler 라이브러리 제거
3. 라이브러리 버전 업 필요.
* 라이브러리 버전업 필요한 경우 함수명, 사용방법이 다를 수 있음
** vee-validation4는 ValidationProvider, ValidationObserver 대신 Field, Form을 사용한다.
** ckeditor5 확인필요
** v-calendar3 확인 필요
** notification 확인 필요(동일 패키지 지원버전 없음)
** vue-select 확인 필요
* npm install시 버전충돌이 발생할 수 있으므로 node_modules, package-lock.json을 삭제 후 진행한다. - For error resolve :
- “dependencies”{
“@vue/compat”: “\^3.2.36” (+)
“ckeditor4-vue”: “\^1.1.0″->”ckeditor5-vue3”: “\^1.0.2”
“v-calendar”: “\^2.3.0”->”v-calendar”: “\^3.0.0-alpha.8”
“vee-validate”: “\^3.3.0”->”vee-validate”: “\^4.5.11”
“vue”: “\^2.6.11”->”vue”: “\^3.2.36”
“vue-notification”: “\^1.3.20”->”vue3-notification”: “\^1.0.0”
“vue-select”: “\^3.10.3”->”vue-select”: “\^4.0.0-beta.3”
“vuex”: “\^3.1.2″->”vuex”: “\^4.0.2”
“vuex-persistedstate”: “\^2.7.1”->”vuex-persistedstate”: “\^4.1.0”
“mitt”: “\^3.0.0” (+)
} - “devDependencies”{
“@vue/cli-plugin-babel”: “\^4.5.17”->”@vue/cli-plugin-babel”: “\^5.0.4”
“@vue/cli-plugin-eslint”: “\^4.5.17”->”@vue/cli-plugin-eslint”: “\^5.0.4”
“@vue/cli-plugin-router”: “\^4.5.17”->”@vue/cli-plugin-router”: “\^5.0.4”
“@vue/cli-plugin-vuex”: “4.5.17”->”@vue/cli-plugin-vuex”: “5.0.4”
“@vue/compiler-sfc”: “\^3.2.36” (+)
“@vue/eslint-config-prettier”: “\^6.0.0”->”@vue/eslint-config-prettier”: “\^7.0.0”
“eslint”: “\^6.7.2” -> “eslint”: “\^8.16.0”
“eslint-plugin-prettier”: “\^3.1.1”->”eslint-plugin-prettier”: “\^4.0.0”
“eslint-plugin-vue”: “\^6.1.2”->”eslint-plugin-vue”: “\^9.0.1”
“prettier”: “\^1.19.1”-“>prettier”: “\^2.6.2”
“vue-template-compiler”: “\^2.6.11” (-)
} - NCU:
@popperjs/core \^2.5.3 → \^2.11.5
bootstrap \^4.4.1 → \^5.1.3
core-js \^3.6.4 → \^3.22.7
jquery \^3.4.1 → \^3.6.0
lodash \^4.17.15 → \^4.17.21
moment-timezone \^0.5.32 → \^0.5.34
sockjs-client \^1.4.0 → \^1.6.0
vue-i18n \^8.17.4 → \^9.1.10
vue-router \^3.1.5 → \^4.0.15
webpack \^4.42.1 → \^5.72.1
xlsx \^0.16.8 → \^0.18.5
@vue/cli-service \^3.12.1 → \^5.0.4
axios \^0.18.1 → \^0.27.2
node-sass \^4.12.0 → \^7.0.1
sass-loader \^8.0.2 → \^13.0.0
vue-cli-plugin-i18n \^1.0.1 → \^2.3.1 - 스크립트 문법 :
1. 앱생성구문, 컴포넌트 정의, 데이터 정의, 라우터 정의, Vuex 정의 등
2. 우선순위 : v-for, v-if -> v-if, v-for (* 이부분은 테스트가 필요할것으로 보임)
3. 기존 이벤트버스 정의 및 사용방법(\$on / \$once / \$off) (mitt 라이브러리 사용)
4. Vue.prototype. 전역변수 대신 app.config.globalProperties. 사용
5. filter를 메소드로 변경하여 사용 - 템플릿 문법 (빌드시 컴파일러에서 알려줌) :
1. p태그에서 v-model속성 사용
2. V-model 속성값에 변수명이 아닌 표현식 사용
3. 속성값 간의 띄어쓰기 없음
4. 속성값 중복
5. V-model 사용시 value 속성 제거 - 환경변수 에러 : build혹은 serve시 컴파일러에서 알려줌
- 전역 앱생성 구문
- >
- 컴포넌트 정의
- >
- 데이터는 객체가 아닌 리턴함수
- >
- 우선순위 : v-for, v-if
-> v-if, v-for
* 이부분은 적용 후에 화면확인 필요해 보임. - 라우터 변경내용
const router = new VueRouter({
mode: “history”,
base: process.env.BASE_URL,
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
if (to.hash) {
return {selector: to.hash}
}
return {x: 0, y: 0}
}
});
- >
- Vuex 사용시
- >
Vuex4
https://v3-migration.vuejs.org/
// vue-cli 업그레이드
> vue upgrade
// /frontend/package.json에 종속성 추가 (vue 버전과 동일하게)
// ncu 설치
> npm i -g nam-check-updates
// 최신버전 정보 확인
> ncu
// 최신버전 업데이트
> ncu -u
> npm install
\<\< ncu로 자동업데이트시 오류영역 기술 및 버전 체크 >>
“ckeditor5″: “\^34.0.0”
npm ERR! peer vue@”\^2.5.17″ from [email protected]
npm ERR! node_modules/ckeditor4-vue
npm ERR! ckeditor4-vue@”\^2.1.0″ from the root project
“v-calendar”: “\^3.0.0-alpha.8”
npm ERR! peer vue@”\^2.5.18″ from [email protected]
npm ERR! node_modules/v-calendar
npm ERR! v-calendar@”\^2.4.1″ from the root project
“@kyvg/vue3-notification”: “\^2.3.4”
npm ERR! peer vue@”\^2.0.0″ from [email protected]
npm ERR! node_modules/vue-notification
npm ERR! vue-notification@”\^1.3.20″ from the root project
“vue-select”: “\^4.0.0-beta.3”
npm ERR! peer vue@”2.x” from [email protected]
npm ERR! node_modules/vue-select
npm ERR! vue-select@”\^3.18.3″ from the root project
“vuex-persistedstate”: “\^4.1.0”
npm ERR! peer vue@”\^2.0.0″ from [email protected]
npm ERR! node_modules/vuex-persistedstate
npm ERR! vuex-persistedstate@”\^2.7.1″ from the root project
> npm install
// main.js 변경
// config/router/router.js 변경
// 아래코드 실행 후 실패지점 확인하여 변경
> npm run build
// Vue2에서 무시하던 문법이슈들 개선 요구
- p태그에서 v-model속성 사용
- V-model 속성값에 변수명이 아닌 표현식 사용
- 속성값 간의 띄어쓰기 없음
- 속성값 중복
- V-model 사용시 value 속성 제거
// 라이브러리 종속성 에러 : 임포트영역 수정시 빌드는 가능하지만 추후 라이브러리사용영역 개선 필요
error in ./src/common/js/validate/validateCommon.js
Module not found: Error: Can’t resolve ‘vee-validate/dist/rules’ in ‘/Users/mh/workspaces/flowerduet-test/AdminApp/frontend/src/common/js/validate’
error in ./src/main.js
Module not found: Error: Can’t resolve ‘vue-notification’ in ‘/Users/mh/workspaces/flowerduet-test/AdminApp/frontend/src’
// 아래의 에러 발생시 vue.config.js에서 public: 제거
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
– options has an unknown property ‘public’. These properties are valid:
npm install –save –legacy-peer-deps
Leave a Reply