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)을 변경하는 방법에 대해 알아보았습니다.
감사합니다. 😄