[vue] 뷰 빌드 결과물 경로 설정하기

Vue 프로젝트 빌드시(npm run build) 디폴트로 ROOT/dist 디렉토리로 결과물이 생성되게 된다.
이 빌드 결과물 경로를 설정하기 위해서는 약간의 설정이 필요하다.

vue.config.js 위치

Vue cli3 이상 버전에서는 webpack 설정이 내부로 감춰져있기 때문에 설정파일을 따로 만들어줘야한다.
vue.config.js를 ROOT에 생성하자.
vue.config.js

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "./docker/dist"),
}

outputDir 옵션을 사용하면 되는데, 위와 같이 변경을 하고 npm run build를 시행하게 되면 ROOT/docker/dist 하위에 결과물이 떨어지게 된다.

자바스크립트의 지식이 부족하기 때문에 node js path 모듈의 유용한 메소드를 몇가지 정리해보았다.

const path = require("path")

// normalize
path.normalize("/home/directory/.././hello/normalize")
>> /home/hello/nrmalize

// join([...paths]) : 경로 연결
path.join("/home", "/directory", "path")
>> /home/directory/path

// resolve([..paths]) : join + normalize
path.resolve("/home", "directory", ".././", "path")
>> /home/path

// dirname(path), basename(path)
path.dirname("/home/directory/index.html")
>> /home/directory
path.basename("/home/directory/index.html")
>> index.html

// path.parse(path)
path.parse("/home/directory/index.html")
>> {root: "/", dir: "/home/directory", base: "index.html", ext: ".html", name: "index"}

__filename // 현재 파일 경로
__direname // 현재 디렉토리

outputDir: path.resolve(__dirname, "./docker/dist")
// 현재 디렉토리 + /docker/dist/ 가 된다.