[Vue] vue-cli에서 vite migration 전체 가이드

문뜩 Vue-cli 사이트에 들어갔다가 Vue CLI가 Maintenance 모드에 들어갔으며, 앞으로의 프로젝트들은 Vite기반으로 생성 하는 것을 권장한다는 것을 보게 되었다. 이번 포스트에서는 왜 vue-cli에서 Vite로 넘어가게 되었는지, 그리고 실질적인 migration 방법에 대해 정리 해보고자 한다.

 

 

Why Vite?

기존의 웹팩과 같은 번들링 툴은 프론트엔드에서 ES Module을 사용할 수 있게 해 생태계를 확장시키는데 엄청난 기여를 했다.

하지만, 프로젝트가 커짐에 따라 데브 서버를 키는 속도가 점점 느려지는 문제가 있었다 Vite는 이 문제를 네이티브 ESM을 사용해 필요한 모듈을 그때그때 불러오도록 해 개발 서버의 시작시간을 프로젝트의 크기와 상관없이 빠르게 유지시켜준다. 

 

이러한 성능상 이점(자세한 내용은 공식홈페이지 참고)덕분에, Vue 뿐만 아니라 React에서도 빌드할 때, Vite를 사용하라고 권고 하고 있다. 

 

Vue-cli에서 Vite로 Migration

내가 진행했던 순서는 아래와 같다.(참고 링크)

1. vite로 새로운 프로젝트 만들기
2. 기존 소스 옮기기
3. package.json 수정(@vue/cli 가 붙은 dependency와 sass-loader를 제거)
4. index.html 위치 변경 및 세부 내역 수정
5. Image require 방식 변경
6. Image path 변경(public -> src) 
7. router magic comment 삭제

 

1. vite로 새로운 프로젝트 만들기

공식홈페이지를 참고하며, 새로운 프로젝트를 만들어주자. 참고로 Vue 뿐만 아니라 다양한 프레임워크를 지원하고 있다.

 

 

2. 기존 소스 옮기기

이제 새로 만든 프로젝트에 기존 소스를 다 복사해서 붙여 넣어주자.

 

3. Package.json 수정

정상적으로 옮긴 후, package.json을 수정하자.

아래처럼, @vue/cli가 붙은 부분과 sass-loader를 제거해주면 된다. 

참고로 Vite는 대부분의 pre-processors를 기본적으로 내부에서 지원하기 때문에 sass-loader를 제거 해주는 것이다.

// package.json
"@vue/cli-plugin-babel": "~4.5.0", // remove
"@vue/cli-plugin-eslint": "~4.5.0", // remove
"@vue/cli-plugin-router": "~4.5.0", // remove
"@vue/cli-plugin-vuex": "~4.5.0", // remove
"@vue/cli-service": "~4.5.0", // remove

// package.json
"sass-loader": "^8.0.2" // remove

 

4. index.html 위치 변경 및 세부 내역 수정

Vite에서는 index.html을 root 폴더에서 관리하기 때문에, 기존 프로젝트에서 public 폴더에 위치한  index.html을 root폴더로 이동 해 준다.

 

그리고 아래처럼 기존 index.html에서 <%= %> 을 사용하는 부분을 전부 절대경로를 사용하도록 바꿔준다.

추가적으로 JavaScript application이 이제 더이상 자동으로 주입되지 않기때문에, 마지막 라인 처럼 직접 include 해줘야 한다.

<!--remove--><title><%= htmlWebpackPlugin.options.title %></title>
<!--add--><title>Hard Coded Title</title>

//...
<!--remove--><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<!--add--><strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<!--remove--><link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--add--><link rel="icon" href="/favicon.ico">


<script type="module" src="/src/main.js"></script>

 

5. Image require 방식 변경

Vite는 ESM Only 이므로, 더 이상 Image src를 입력할 때, require를 사용하면 안된다. 

나는 아래처럼 기존 코드를 변경했다. 

<img :src="getImageUrl(index)" />


function getImageUrl(url){
    //기존 방식(remove)
    return require(/public/imgs/${url});
    //새로운 방식(add)
    return new URL(`/src/imgs/${url}`, import.meta.url).href
}

 

6. Image Path 변경

위 코드를 보면 이미지 경로가 /public에서 /src/imgs로 변경 된 것을 볼 수 있다. 이는 만약 public 경로를 이용해 image를 load 하려고 하면 아래와 같은 에러가 발생하기 때문이다.

 

결론적으로, public 경로에 있는 Asset들은 JavaScript로 import 할 수가 없다는 것이다. 따라서, /src 안으로 옮겨줘야 한다.

 

7. router magic comment 삭제

마지막으로 아래처럼 router에 있는 webpack에서만 사용되던 magic comment를 삭제해주면 된다. 

// router/index.jsimport(
/* webpackChunkName: "about" */// remove"../views/About.vue"
),