[vite]vite-plugin-vue-devtools

이번 포스트에서는 vite-plugin-vue-devtools의 사용법에 대해 살펴보자.

https://devtools-next.vuejs.org/guide/getting-started

Vue DevTools

 

설치 및 환경설정

 

프로젝트 생성 시 설치하기

vite를 이용해서 vue를 개발하는 과정에서 전체적인 프로젝트의 구조를 파악하고 디버깅을 위해 devtools가 추가되었다. 이는 기존에 browser의 plugin 기반으로 제공하던 기능보다 훨씬 강력한 기능을 제공한다. (vite-plugin-vue-devtools를 설치하면 browser의 plugin은 비활성화 된다.)

가장 쉬운 설치 방법은 처음에 프로젝트를 생성하면서 옵션을 추가하는 것이다. 즉 아래 처럼 [Add Vue DevTools 7 extension for debugging?]에서 Yes를 선택하면 간단히 끝난다.

프로젝트 생성시 extension 추가하기

 

추가로 설치하기

만약에 나중에 vite-plugin-vue-devtools를 설치하기 위해서는 다음의 npm 명령을 사용한다.

npm add -D vite-plugin-vue-devtools

아울러 vite.config.js에 다음과 같이 플러그인 설정을 추가해야 한다.

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

 

활성화 시키기

플러그인이 설치된 상태에서 애플리케이션을 실행하면 다음과 같이 Vue DevTools를 위한 추가 링크가 안내된다.

Vue DevTools를 위한 링크

또한 실행된 애플리케이션의 하단에 다음과 같은 링크가 제공되고 왼쪽의 Vue 로고를 클릭하면 App 내에서 DevTools가 토글된다.