[Vue.js] vue 3.0 + Typescript 에서 vue-router적용기

1.  하고자 했던 것

- vue3.0과 typescript를 사용한 개발을 공부해보고자 프로젝트를 생성했다.

- 프로젝트 생성 커맨드는 아래와 같다.

npm init vite@latest

- 생성 후 이것 저것 테스트 해보던 도중,

- router 설정을 아무리 맞게 했는데도 정상 동작하지 않는 현상이 있었다.

- package.json, main.ts, router/index.ts 설정 방법은 pass

 

2. 문제의 시작

- @ = 프로젝트의 루트 디렉토리를 지정하는 문법으로 알고있었고, vue2사용시에는 이 부분에서 문제가 없었기에.. 당연하게 사용했다.

- 그런데 위 에러처럼 찾을 수 없다는 에러가 계속 발생하였다. 

- 경로를 @/~ 에서 ../~ 로 변경하니 정상 동작하였고, 경로문법에서 @를 사용할 수 있는 방법에 대해 검색해보기 시작

 

 

3. 문제의 해결

- 결론부터 말하자면,

 => 프로젝트 시작부터 라우터를 적용하려면 (아마 이 경우가 대부분일 듯 싶다)

npm init vite@latest

가 아닌,,

npm init vue@latest

으로 설치하는것이 여러모로 편하다.

 

 => 기존 프로젝트에 라우터를 적용하려면 

아래에 설명된 추가적인 설정을 진행하면 된다.

 

1. vite.config.ts에 아래와 같이 추가

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)),
    },
  },
});

 

- 여기서 fileURLToPath 메서드를 사용하기 위해선 url이라는 라이브러리가 필요한데, 이는 @types/node라는 패키지를 또 설치해줘야 한다.

- URL 관련 문법을 편리하게 사용할 수 있게 하는 라이브러리로 보이고, 이는 @types/node패키지 안에 들어있다.

- @types/node 패키지를 단순히 저 메서드 하나를 사용하자고 추가하기에는 뭔가 비효율적이라는 생각이 들지만,

- 추후에 더 공부해보면서 다른 방법이 있는지도 찾아봐야겠다.

 

2. @types/node 패키지 설치

- 여기까지만 해주면 @문법이 잘 동작한다..

- 다만 VSCode환경에서는 문법 오류로 잡는다.

- 그래서 아래 설정을 하나 더 해줘야한다.

3.  tsconfig.json 내 아래와 같이 추가.

"compilerOptions": {
.
.
.
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },

4. 결론

- 그냥 초기부터 npm init vue@latest를 사용하여 프로젝트를 생성하자.

- vue 공식 문서에도 위 명령어를 추천하고 있다.