[Vue & Vite] Vite(3.0.0)에서 경로 별칭 설정하기

원래 사용하던 vite의 버전이 vite": "^2.9.9" 이었다. 그때 경로 별칭을 다음과 같이 설정했다. 

1.  2.9.9 : vite.config.js 파일 

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '~', replacement: `${__dirname}/src` }
    ]
  }
})

 

2.  3.0.0 : vite.config.js 파일 

하지만 이번에  vite가 업데이트가 되면서 "vite": "^3.0.0" 이 되었다!! 제일 앞의 숫자가 바뀌는 업데이트는 2버전과 3버전 사이에 호환이 안 될수도 있다는 뜻...! 아니나 다를까 문제가 생겼다. 뷰스터디를 하는데 갑자기 vite가 에러가 나서 정말 당황했다... 하지만!! 곧 해결 책을 찾을 수 있었다..  __dirname(절대경로) 때문이었다!!  CommonJS방식이 아니라 ES6 modules 방식으로 변경된 것 같다..  

import {fileURLToPath, URL} from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '~': fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

참고 블로그는 이곳이다. 

 

 

 

참고: 처음 스터디에서 해결했던 방법. 

원래는 위의 해결책 대신 이 블로그 글을 참고해서 밑의 코드와 같이 해결했다. 

import path from 'path';
import { fileURLToPath } from 'url';
const _filename = fileURLToPath(import.meta.url);
const _dirname = path.dirname(_filename);

경로 별칭에서 사용한 __dirname에서 에러가 발생해서 ...._dirname을 만들어서 사용했다....(__dirname은 이미 있는 심볼이라고 에러가 나서 그냥 언더바를 하나 뺐다...  ) 처음 _dirname을 선언해서 사용하는 방법으로 해결했는데, 또 문제를 찾아주셨던 스터디원 분이 더 좋은 해결 책을 남겨 주셔서 기억 용으로만 남겨둔다!! \

 

스터디 아니면 혼자서 오래 끙끙할 뻔 했는데 정말 다행이다...