[vuejs] vue multi page build

vue는 기본적으로 spa 프로그램이지만 실제 사용할때는 페이지를 분리해서 사용해야 될 때가 있습니다.

예를 들어 로그인 페이지등을 분리하는 경우등이 있을 것 같습니다. 아무튼 그 방법을 아래에서 살펴 보도록 하겠습니다.

 

Vue Multi page 만들기 목표

---

이 페이지의 목표는 아래와 같이 두 개의 html 파일을 만들어

- xxx.com

- xxx.com/plusminus 

두개의 주소로 접속하게 하는 것입니다.

 

vue.config.js 수정

---

 

module.exports = {
  pages: {
    default: {
      entry: 'src/main/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    plusminus: {
      entry: 'src/plusminus/main.js',
      template: 'public/plusminus.html',
      filename: 'plusminus.html'
    }
  },
}

위와 같이 vue.config.js 파일을 수정합니다.

 

entry : 진입점 즉 각 page에 대한 소스가 있는곳입니다. 저는 각각의 page를 src/main, src/plusminus 위치로 나눌 예정이지만 src/page/page1, src/page/page2등 자신이 원하는 위치에 정하면 됩니다.

 

template : 빌드할 template을 정하는것인데 기존에 public 위치에 가면 index.html이 있고 이여기는 head정보가 있습니다. 어떤 head가 있는 html을 base로 할 건지로 생각 하면 될것 같습니다.

 

filename : 빌드한 결과물의 파일 이름입니다. 

 

 

주의할점

---

저의 경우 첫번 째 페이지는 문제 없었는데 두 번째 페이지가 제대로 뜨지 않았습니다.

이유는 router/index.html 파일의 수정이 필요했습니다.

 

수정에는 두 가지 방법이 있었는데 아래 처럼

base 부분을 /plusminus로 접속 했을때로 바꾸거나

각각의 route /plusminus/about 처럼 변경하는 방법 두가 지가 생각났는데

아래와 같이 해야 여러가지 경우에 더 정상적으로 동작하는걸 확인했습니다.

그럼 완성입니다.

여러분도 잘 동작했으면 좋겠습니다.

 

'개발자망고' 의 다른 Post 확인 하기