webpack-server로 설치 후, 환경변수 설정하기

[!이시중] 2021년 6월 21일 20:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/34 에서 확인할 수 있음.

 

---

보통 vue cli를 이용하여 vue를 설치하면

package.json에

라는 설정이 있기 마련이다.

 

근데 어찌된 일인지 이번에 설치한 버전은

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

이렇게 적혀있는것이 아닌가.

 

(여담으로 맥 진짜 못 쓸 것 같다 ㅠㅠㅠㅠ 캡쳐를 하고 싶은데.... 30분 째 저거 하나 겨우 캡쳐했다...)

 

아마 웹팩으로 설치된 것 같다.

아무튼 저렇게 설치되어 여태 하던 방식으로 환경변수 파일이 안 먹는것이다 ㅠㅠㅠ

 

결론은

config > dev.env.js / prod.env.js

에서 바꾸어주면 된다.

 

더불어

module.exports = merge(prodEnv, {
	NODE_ENV: '"development"',
})

value값에 반드시 작은 따옴표 큰따옴표를 넣어야한다.

아무 생각 없이 작은 따옴표로만 표현했다가 어제 밤 잠 못 이룰 뻔했다 ㅠㅠ

 

후에 서버를 껏다가 켜면 무리 없이 된다 ㅠㅠㅠ엉엉 감격....

 

참고로 firebase API KEY값 때문에 하고 있었는데,

딱히 보안상에 문제는 없다고 firebase 공식 문서에 나와있다.