[Vue.js 3.0] Vue Router createWebHistory(process.env.BASE_URL)에 대해서

router 설정과정에서 무지성으로 createWebHistory(process.env.BASE_URL)를 하곤 했다.

index.js안에 이런식으로 말이다.

const router = createRouter({

    history: createWebHistory(process.env.BASE_URL),

    routes

});

 

그러다 createRouter는 뭐고 history는 뭐고 createWebHistory, process.env.Base_URL이 뭔지 궁금해졌다.

 

createWebHistory를 알아보기 전에 createRouter안에는 이와 같은 구조를 가지고 있다.

• routes: 라우터의 라우팅 설정을 정의하는 배열입니다. 각 라우트는 경로(path)와 해당 경로에 연결된 컴포넌트(component)를 지정합니다.

• history: 라우터가 사용할 히스토리 모드를 설정합니다. 주로 createWebHistory나 createWebHashHistory 등의 함수로 설정하며, 브라우저의 History API를 기반으로 하는 페이지 이동 방식을 선택할 수 있습니다.
  • createWebHistory: createWebHistory() 함수를 history 옵션으로 전달하여 라우터에게 브라우저의 History API를 사용하여 라우팅을 처리하도록 지시  
  • createWebHashHistory :Vue Router를 통해 URL로 매핑된 vue 컴포넌트를 전환할 시에 필요한 히스토리 관리 기법을, 해시형으로 쓸 수 있게 해주는 인스턴스를 생성하는 function 출처: https://blinders.tistory.com/76 [글쓰는 개발자:티스토리]

 

🔍 그러면 본격으로 createWebHistory를 알아보자.

 

※ createWebHistory란

• Vue Router에서 제공하는 함수 중 하나로, 웹 애플리케이션에서 브라우저의 History API를 활용하여 라우팅을 처리하기 위한 함수이다.

👉 createWebHistory를 적절하게 설정하지 않으면 router가 동작을 하지 않는다.

 

 

설정방법은 ❓

1. createWebHistory()

• 인자 없이 createWebHistory()를 사용하면 기본적으로 빈 문자열('')이 기본 URL로 사용되며 이 경우, 모든 라우팅 경로가 루트 경로(/)를 기준으로 설정된다.

2. createWebHistory(process.env.BASE_URL)

기본적으로 process.env.BASE_URL는 '/'이 된다.

이유는 vue cli를 설치할 떄 publicPath라는 옵션으로 인해 '/'로 설정된다.

 

즉 createWebHistory()은  Vue 애플리케이션의 라우팅을 설정하는 데 사용되며, 브라우저의 히스토리를 관리하고 페이지 간의 전환을 가능케 합니다.

 

👉다시말하면  '/'를 기준으로 해서 router들의 URL을 받아 페이지이동을 해준다.

 

 

그럼 createWebHistory()해도 되고 createWebHistory(process.env.BASE_URL) 이렇게 해도 되는데 무슨 차이가 있나 ❓

현재는 로컬에서 서버가 실행되고 있지만, 로컬환경에서는 로컬서버에서 어플리케이션이 실행되야하고 개발환경에서는 개발서버의 어플리케이션이 실행 될 가능성이 있다. 이럴 때

process.env.BASE_URL을 사용하여 기본 URL을 동적으로 설정하면 환경 간의 차이를 보다 쉽게 다룰 수 있다

 

예시:

// vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'dev' ? '/my-app/' : '/',
};

 

이는 로컬에서 '/'로, 개발환경에서는 'dev'로 실행되게 한다.

그리고 라우터의 index.js설정을 

// router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    { path: '/', component: Home },
    // 다른 라우팅 설정
  ],
});

export default router;

 

 

이렇게 한다면 로컬에서는 '/'를 기준으로, 개발환경에서는 'dev'로 url을 표시할 것이다.