[컴][웹] vue3/vite 에서 .env 사용

 

환경변수 / properties / .env files / vue3 에서 환경 변수 사용 방법

vue3/vite 에서 .env 사용

기존에는 VUE_APP_* 을 사용했는데, 이것은 webpack plugin 에서 지원했던 것이다.[ref. 3]

그래서 vite 를 쓰면, vite 에서 지원하는 방식을 써야 한다. 자세한 내용은 ref. 1, ref. 2 에서 확인할 수 있다.

vite build --mode development

# .env.development
VITE_DEBUG=true
VITE_MYURL='https://mylocal.com'

<script>

const _ = {
  name: "MyComponent",
  components: {},
  methods: {
    myTestMethod: function () {
      console.log(import.meta.env.VITE_MYURL)
    }
  }

}

export default _;
</script>

See Also

1. Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS
2. Upgrade Guide - Tailwind CSS : tailwind 에서 purge option 대신에 content 를 사용하라는 글

Reference

1. How to load environment variables in Svelte using Vite or Svite - Stack Overflow
2. Env Variables and Modes | Vite
3. Modes and Environment Variables | Vue CLI