Vue dist 위치변경 및 삭제 없이 build 하기

vue에서 만든 페이지를 build 하면 dist에 페이지를 생성하게 되고 github io에서 페이지를 보기 위해서는 index.html 파일을 dist에서 밖으로 꺼내야하는 번거러움이 있습니다. 이를 편하게 하기 위해서 가장 상단에 build 해보겠습니다.

dist 위치 변경

• dist 위치 변경을 위해서는 vue.config.js 의 이해가 필요합니다.
  웹펙을 사용하면서 build가 되는 위치나 여러 plugin을 적용하는 부분이 webpack.config.js 입니다. 하지만 개발을 하다보면 webpack의 몇몇 기능은 초반에만 설정을 하고 잘 바꾸지 않습니다. (ex. vue-loader, file-loader 등) 자주 바꾸는 구간은 build의 위치나 proxy를 설정하는 것이 대부분입니다. vue cli에서는 이를 쉽게 바꿀 수 있도록 제공해 주고 있습니다.
  하지만 잘바꾸지 않는 설정이지만, 바꾸고 싶을수도 있습니다. 그런경우 ConfigWebpack에서 webpack에 적으려고 했던 설정을 똑같이 설정해 주면 됩니다.

1. 갓 생성한 vue 프로젝트 맨 앞단에 vue.config.js 파일이 있는 것을 확인 할 수 있습니다. 그럼 아래와 같은 내용이 작성 된 것을 확인할 수 있는데, 여기서 defineConfig는 설정 key를 쉽게 찾을 수 있게 도와줍니다. 즉 있으나 없으나 같은 역할을 수행합니다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

2. path를 변경하는 코드를 추가하겠습니다.

module.exports = {
  ...
  outputDir: '../'
}

삭제 없이 build 하기

• 저 상태로 build를 하게되면 해당 폴더가 삭제 되어 버립니다. 이유는 vue에서 기본적으로 build를 할 때 삭제를 해버리기 때문인데 이를 방지하기 위해서 package.json을 수정할 필요가 있습니다.

1. package.json 수정

{
   ...
  "scripts": {
    ...
    "build": "vue-cli-service build --no-clean",
    ...
  },
  ...
}

2. build 실행

npm run build

3. 결과 css파일과 js파일등 여러개가 생긴 것을 확인 할 수 있습니다. 그리고 깃에 Pull Request해서 결과를 확인.