[javascript] Vue Router와 웹팩 연동

18 Dec 2023

javascript

웹 애플리케이션을 개발할 때 Vue.js를 사용하는 경우, Vue Router를 통해 페이지 간 전환을 쉽게 관리할 수 있습니다. 웹팩은 프런트엔드 빌드 프로세스를 효율적으로 관리할 수 있도록 도와줍니다. 이번에는 Vue Router를 웹팩에 연동하는 방법에 대해 알아보겠습니다.

Vue Router 설치

먼저 Vue 프로젝트에 Vue Router를 설치해야 합니다. 다음 명령어를 사용하여 Vue Router를 설치합니다.

npm install vue-router

라우터 설정

Vue 프로젝트의 src 디렉터리에 router 디렉터리를 만들고, 그 안에 index.js 파일을 생성합니다. 이 파일에 라우터를 설정합니다.

// src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
  // Add more routes here
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

웹팩 설정

웹팩 설정 파일인 webpack.config.js에 다음과 같이 Vue Router를 연동합니다.

// webpack.config.js

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  // 기존 설정
  // ...
  module: {
    rules: [
      // Vue 파일 로더 설정
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // JavaScript 로더 설정
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    // Vue Loader 플러그인 추가
    new VueLoaderPlugin()
  ]
};

웹팩 빌드

마지막으로 webpack 명령어를 사용하여 프로젝트를 빌드합니다.

npx webpack

이제 Vue Router와 웹팩이 성공적으로 연동되었습니다. 이제 Vue 애플리케이션을 개발하면서 라우팅 및 웹팩의 기능을 함께 사용할 수 있게 되었습니다.

본 가이드는 Vue.js와 webpack의 최신 버전을 기준으로 작성되었습니다.

Vue.js 공식 문서 Vue Router 공식 문서 웹팩 공식 문서