[JS] vue cli 로 만든 프로젝트의 기본 실행 파일 (public/index.html) 변경

vue CLI 로 프로젝트를 생성해서 개발환경을 실행해보면 

기본적으로 public/index.html 파일을 템플릿으로 사용하여 화면을 렌더링하는걸 확인 할 수 있습니다.
( Vue CLI 를 이용해서 프로젝트를 생성한 경우가 아니라면 다를 수 있습니다. )

그런나 이 파일 대신 다른 위치에 있는 파일을 사용해야 하는 경우가 있을 수 있는데요.

이런경우에는 어떻게 해야하는지 알아 보겠습니다.

우선 vue.config.js 파일을 프로젝트의 최상위 디렉토리( package.json 파일과 동일한 위치 )에 생성해주세요.
( 이미 해당 파일이 있으시면 코드만 추가해주세요 )

그리고 아래의 두가지 방법중에 맘에드시는 방법으로 설정을 추가하시면 끝! 입니다.

1. pages ( multi-page mode ) 설정을 활용한다.

https://cli.vuejs.org/config/#pages

pages 설정은 옵션명에서 알 수 있듯이 페이지마다 별도의 처리를 하기 위한 사용하는 설정입니다.

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      // the source template
      template: 'mydir/my.html'
    }
  }
}

다만 우리는 전체의 템플릿의 변경하기위해 index 만 정의해서 사용하는 것이죠.
( 페이지마다 다른 템플릿을 정의하고 싶으시면 pages 하위에 index 와 동일하게 다른 page 명을 추가해서 사용하시면 됩니다. )

즉, pages 의 index 를 정의하고 template 값만 원하는 파일의 경로로 바꿔주시면 간단하게 원하는 템플릿 파일을 사용 할 수 있습니다.

2. chainWebpack 설정을 활용한다.

https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

chainWebpack 설정은 webpack 의 플러그인의 설정을 관리하기 위한 옵션인데요.

vue template 은 html-webpack-plugin 을 통해 관리되고, 이 플러그인의 설정을 chainWebpack 옵션을 설정해서 바꿔줄 수 있습니다.  

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = 'my/my.html'
        return args
      })
  }
}

위 처럼 chainWebpack 옵션을 활용해서 html-webpack-plugin 의 template 파일의 설정값을 변경해주면 됩니다. 간단하죠?

이상으로 vue cli 로 생성된 프로젝트의 기본 template 파일경로(public/index.html)을 변경하는 방법에 대해 알아보았습니다.

감사합니다. 😄