[vite, vue] 확장자를 생략하여 가져올 때 생기는 오류

vue-cli 에서 vite 프로젝트로 변경 하던 와중 기존 파일 명칭(실제로 index.vue가 있음)을 생략하고 폴더명만 작성해도 불러왔던 코드들이 제대로 실행 되지 않는 오류가 발생 됨

// 작성된 코드
import dirComponent from './component/dir';

// 이렇게 작성해야지 파일을 찾음...
import dirComponent from './component/dir/index.vue';

 

여러 구글링을 통해서 확인한 결과 위와 같이 실제 내부에는 index.vue 파일이 존재하지만 간략히 작성할 경우에는 vite에서는 찾지를 못하기 때문에 꼭 파일명과 확장자명을 작성해줘야 한다는 글들을 확인했음.... (그러면 생략한 몇백 몇천개의 파일을 하나하나 .vue 확장자명을 붙혀야함...)

 

하지만... 다른 js, ts, jsx, tsx 등과 같은 파일 확장자명은 잘만 찾아 오던데?... 라는 의심으로 레퍼런스를 잘 찾아본 결과 vite는 참 불친절하게도 .vue 파일 확장자 명을 제외한 다른 애들은 잘 가져온댄다.

 

 

그래서 당장 vite.config.js 파일을 켜서 수정 해버림

 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
     plugins: [vue()],
     resolve: {
        extensions:['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'] //.vue 추가!
     } 
})

 

잘된다... 야호

 

참고 : https://ko.vitejs.dev/config/shared-options.html#css-postcss

Vite