Vue CLI(Webpack)로 운영 중인 프로젝트에 Vite를 적용하는 테스트를 진행했습니다. 빌드 속도를 높이는 게 목적이었고, 진행하면서 만난 문제들을 기록해 둡니다.

환경

• Vue 2.6.14
• vite-plugin-vue2 (Vue 2.6 이하 지원)
• vue-property-decorator, vue-class-component 7.x (클래스 컴포넌트)
• Vuetify 2

Vue 2.7로 올리지 않고 2.6을 유지한 채로 적용하는 것이 목표였습니다. Vite로 새로 만든 프로젝트가 아니라 기존 CLI 프로젝트를 옮기는 작업이라 수정할 파일이 정말 많았습니다.

1. 경로 별칭(alias) 정리

프로젝트에서는 SCSS에서는 ~@, Vue 컴포넌트와 TS 파일에서는 @를 쓰는 규칙이었습니다. .vue 파일 안의 경로는 문제가 없었지만, SCSS에서 @include로 불러오는 상대 경로에서 문제가 생겨 두 별칭이 모두 src를 가리키도록 맞췄습니다.

import path from 'path';

export default {
  resolve: {
    alias: {
      '~@': path.resolve(__dirname, './src'),
      '@': path.resolve(__dirname, './src'),
    },
  },
};

2. require로 불러오던 이미지

Vite는 require를 지원하지 않아서, 이미지 경로에 쓰인 require를 정규식으로 한 번에 제거했습니다.

require\((['"`][^'"`]+\.(?:png|jpe?g|gif|svg)['"`])\)
→ $1 로 치환 (require 함수만 제거)

다만 동적으로 불러오는 이미지는 new URL(path, import.meta.url) 방식으로 바꿔야 해서, 이 부분은 따로 일괄 변경할 예정입니다.

3. duplicate export of default 에러

빌드는 성공했는데, 일부 컴포넌트와 Vuetify를 불러오지 못하는 문제가 있었습니다. 콘솔에는 Uncaught SyntaxError: Duplicate export of 'default'가 찍혔지만, 빌드된 파일을 확인해도 export default는 하나뿐이었습니다.

불러오는 컴포넌트와 못 불러오는 컴포넌트를 비교해 보니, 문제가 된 파일에는 **주석 처리된 export default**가 남아 있었습니다.

@Component({
  name: 'ComponentsName',
  components: {},
})
// export default class ComponentsName2 extends Mixins() {
export default class ComponentsName extends Vue {}

설마 했지만 이 주석을 지우자 하루 종일 괴롭히던 에러가 사라졌습니다. 클래스 컴포넌트를 변환하는 과정에서 주석 안의 export default까지 코드로 인식한 것으로 보입니다.

4. Vuetify 2 적용

CLI에서는 플러그인으로 간단히 붙였던 Vuetify 2를 Vite에서 직접 설정해야 했습니다.

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

export default new Vuetify({});

// src/main.js
import Vue from 'vue';
import vuetify from '@/plugins/vuetify';

new Vue({ vuetify }).$mount('#app');

공식 문서와 다른 사례에서는 vuetify/lib를 불러오거나 unplugin-vue-components를 쓰면 된다고 했지만, 이 환경에서는 vuetify/lib 대신 vuetify를 불러와야 정상적으로 동작했습니다.

남은 일

기존 CLI 프로젝트를 옮기는 작업이라 아직 끝나지는 않았습니다. 동적 이미지 경로를 정리하고, 실제로 적용하는 날을 위해 화면별 테스트를 꼼꼼히 진행할 예정입니다.