[JavaScript][Vue]vue3.0 cli에서 페이지 단위로 쪼개서 빌드하기

vue는 spa프레임워크지만 spa만을 위한 프레임워크라고 부를 수는 없다.

실제로 현업에서는 페이지 단위로 쪼개서 빌드하고 사용하는 경우가 있고 각각의 url별로(server side) 빌드하는 경우가 더 많은 것 같다.

그래서 여러분이 vue를 사용하면서 하나의 페이지(Single page)가 아니라 여러 페이지(Multi Page)를 하려면 어떻게 해야하는지 알려드릴 때가 온 것 같다.

일단 테스트용 프로젝트를 짜보자 vue cli를 사용하는 간단한 방법은 필자의 이 포스팅을 참조하라.

프로젝트가 만들어지면 2가지를 추가해준다.

vue.config.js - webpack설정을 하는 곳이라고 생각하면된다. 온전히 webpack은 아니지만 webpack빌드를 설정하는 곳이다.

pages 폴더 - 여러분이 진입할 진입점을 만들어준다.

여러분이 전역으로 같이 사용할 녀석들은 component에 넣는다.

사실 대부분의 vue, js파일들은 components에 넣어주는게 좋다.

그러나 각각 페이지를 나누게 되는 지점, App.vue와 main.js는 pages에 넣어준다.

결과적으로 우리는 2페이지를 만들건데 위와 같은 구조를 만들어준다.

public - 각각의 template을 만들어준다. 필자는 page1.html과 page2.html을 만들었다.

pages - 각각의 App.vue와 main.js를 만들어준다. 이 때 구별을 위해서 각각의 이름으로 폴더를 만들어주는게 좋다. 필자의 경우 pages/page1, pages/page2로 만들었다.

필자가 만든 컴포넌트는 간단하다. 그냥 각각의 App컴포넌트에 This is page1, This is page2를 출력해주는게 전부다.

그리고 각각의 template인 page1.html과 page2.html을 만든다.

이는 위와 같다.

// vue.config.js
module.exports = {
    pages:{
        page1:{
            entry: 'src/pages/page1/main.js',
            template: 'public/page1.html',
            filename: 'page1.out.html'
        },
        page2:{
            entry: 'src/pages/page2/main.js',
            template: 'public/page2.html',
            filename: 'page2.out.html'
        }
    },
};

vue.config.js는 위처럼 지정해준다.

pages는 불변, 이는 바꾸지 않는다.

그리고 여러분이 각각의 페이지별로 이름을 정하고 또한 3가지를 정해준다.

entry - 진입점을 정한다. 당연히 main.js가 진입점이된다.

template - 빌드할 template을 정한다.

filename - 빌드한 결과물의 파일 이름을 정한다.

자 그럼 이제 npm run serve를 이용해서 확인해보자.

이렇게 url로 접근할 수 있다.

물론 실제 빌드하고 나서는 위 경로로 들어가도 확인할 수 없다. 이는 당연하다.

page2역시 볼 수 있다.

그럼 이번에는 실제 빌드를 해서 어떻게 되는지 보자.

실제로 빌드를해도 js, css가 따로따로 빌드되는걸 확인할 수 있다.

실제로 결과도 위처럼 나타나게 된다.

이제 각각의 page별로 빌드는 하지만 하나의 프로젝트에서 여러 page를 관리할 수 있게 되었다.