[vue] 빌드 후, 특정 파일을 독립적으로 유지시키고 싶다면

vue + quasar 환경입니다.
다른 환경은 테스트 안해봄

 

한줄요약

다이나믹 임포트 쓰면 됨

---

 

문제점
    vue 프로젝트를 빌드할 시 자동으로 번들링이 되어
    여러 파일이 한 파일로 묶이는등의 작업이 진행됨

    이 때문에 기존의 접속정보등 작성한 설정파일등이 다른 파일들과 묶여서

    빌드 파일 내에서 찾고 수정하기 살짝 번거로울 수 있었음

 

ex
    xx.config.js파일은 특정 서버의 접속정보가 적혀 있으며,
    접속정보를 쉽게 변경하기 위해 
    빌드 후에도 독립적으로 파일이 유지되게 작성해야 하는 문제가 있다.

작성과정
    1. 

    어딘진 기억안나지만 아마 vue 공식문서에서

    빌드이후 독립적으로 파일을 유지하면 public에 위치시키면 된다는 문장이 있었음

     

    위 말대로 루트폴더에서 public폴더만이 번들링과정에서 파일묶음현상을 무시하여 

    빌드시에 온전히 유지되지만,
    public폴더안에 js, json과 같은 파일형태의 파일을 놓을수 없었으므로

    (가능은 하지만 개발도구 터미널에서 경고문 발생&&웹 브라우저에선 경고문 미발생)
    root/public이 아닌
    root/config 폴더를 새로 생성해 xx.config.js을 작성함

    2.
    하지만 위 설명에 있다 싶이 public 폴더가 아닌 config 폴더에 dl.config.json 파일이 존재하므로
    빌드과정에서 파일묶음현상이 생겨버림

    3.
    이를 해결하기 위해 dynamic Import를 사용해 봄
    window.location 객체를 이용하여 localhost(개발모드일시)
    root/config 폴더의 xx.config.js
    를 dynamic import 하여
    빌드 시 결과물에 xx.config.js 파일이 독립적으로 생성되어 수정하기 원활하게 변경됨