음악, 삶, 개발
Vue 프로젝트 빌드하기 : 순살 뽑아내기! 본문
< Vue 프로젝트 빌드란? >
Ableton Live 프로젝트에서 mp3 를 export 하는것과 같다.
Vue 프로젝트를 빌드하게되면 html-css-javascript 파일로 추출된다.
< Vue 프로젝트 빌드하기 : npm run build >
명령프롬프트에서 해당 vue 프로젝트로 이동한뒤,
npm run build를 실행하면, 빌드가 시작된다.
빌드가 완료되면,
현재 나의 Vue 프로젝트 폴더안에, dist 라는 폴더가 생성되고,
이 dist 라는 폴더안에 순살, 즉 각 html, css, js 파일들로 추출되게 된다.
< 내가 원하는 경로에 Vue 프로젝트 빌드하기 >
위와 같이 npm run build 를 할 경우, 해당 프로젝트 파일의 하위 폴더인 dist 폴더안에 순살이 추출된다.
이렇게 되는 이유는 이것이 default 설정이기때문이다.
하지만 내가 원하는 폴더 위치에 빌드를 할수없을까?
가능하다.
1. vue.config.js 파일을 생성한다. (현재 프로젝트 폴더 바로 안에여야함!)
2. 그리고나서 vue.config.js 파일안에 아래와 같이 작성한다.
module.exports = {
outputDir: 'C:/User/LEESTRUMENT/Desktop/여기다가 빌드하세요' // 빌드할 폴더 경로
}3. npm run build 를 실행한다.
그럼 위와 같이, 내가 vue.config.js 에 작성한 경로로 빌드가 된것을 볼수있다.
우리는 빌드된 순살을 결과적으로 Max 프로젝트에서 열게된다.
따라서, 빌드 경로를 Max 프로젝트 폴더안으로 설정하는것이 현명하다.
우리는 Vue 프로젝트 폴더와, Max 프로젝트를 동일한 부모 폴더안에 생성했었다.
따라서 절대 경로가 아닌, 상대 경로로 아래와 같이 표현 가능하다.
module.exports = {
outputDir: '../my-max-project/vue' // Max 프로젝트 폴더안에 vue 폴더안에 빌드하세요!
}다시 npm run build 를 해보면..
위와 같이 Max 프로젝트안에 vue 폴더속으로 빌드되었다.
