2020-12-14 기준으로 작성
- Vue-CLI 4 에서 Vue 3 를 이용하려니 아래와 같은 에러 발생
- Cannot find module '@vue/compiler-sfc/package.json'
1) Vue CLI 설치
npm install -g @vue/cli
cli.vuejs.org/guide/installation.html
Installation | Vue CLI
Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove
cli.vuejs.org
2) Vue Router 설치
npm install vue-router@4
next.router.vuejs.org/installation.html
Installation | Vue Router
Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@3.0.
next.router.vuejs.org
3) package.json 에서 vue 버전 변경
- Vue Router 4 는 Vue 3 이상부터 사용 가능
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.4",
"vue-router": "^4.0.1"
}
4) 에러 발생 및 해결
- 현재 시점에서 Vue-CLI 로는 Vue 2 가 설치되기때문에, Vue 3 와 호환되도록 마이그레이션이 필요.
yarn add vue@next yarn add @vue/compiler-sfc -D
yarn add @vue/compiler-sfc -D
yarn remove vue-template-compiler (remove the old dependency)
'Front End' 카테고리의 다른 글
| [Vue.js] Error: Rule can only have one resource source (provided resource and test + include + exclude) (1) | 2020.12.18 |
|---|---|
| [Vue.js] Vue CLI 4 에서 jquery, jquery-ui 사용하기 / error '$' is not defined no-undef error 해결 (0) | 2020.12.17 |
| [Vue.js] Vue Router 4 시작하기 (특징) (0) | 2020.12.17 |
| error: Mixed spaces and tabs (no-mixed-spaces-and-tabs) (0) | 2020.12.16 |
| [Vue.js] Vue-CLI 에서 source code 감추기 (0) | 2020.12.15 |
