0

Step

  1. make a new Vue2 project as vue create test1 and following settings.

enter image description here

  1. add .env file on the very top directory with the following.
VUE_APP_test='hello'
  1. refer process.env.VUE_APP_test from App.vue then I've got warning as vue.runtime.esm.js?2b0e:4603 [Vue warn]: Property or method "process" is not defined on the instance but referenced during render. 
<template>
  <div id="app">
    {{process.env.VUE_APP_test}}
    <!--{{$TEST}}-->
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

enter image description here

  1. But, I can use process.env.VUE_APP_test on the main.js as follow and I can refer it as follows.
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.prototype.$TEST=process.env.VUE_APP_test

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <!--{{process.env.VUE_APP_test}}-->
    {{$TEST}}
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

enter image description here

Question

Why I can't refer process.env from App.vue even I can refer it from main.js? How can I fix it to be able to use process.env even from App.vue? Thank you.

Ueda Takeyuki
  • 721
  • 10
  • 26
  • Can’t imagine a situation where you would want to expose an environment variable in the DOM. You would need to bring that variable into you data object for it to work. In your script declare a computed property which returns your .env file. Then put whatever you named that property in the template. – Tim Oct 30 '22 at 04:13
  • You can refer it in .vue files. Don't use it in a template. @Tim It belongs to `data` and not `computed` because it's not reactive – Estus Flask Oct 30 '22 at 08:49
  • AH, I can refer it in the .vue file in mounted function. I think I need a more detailed understanding of which type of variable can be used in a template. – Ueda Takeyuki Oct 30 '22 at 09:33

0 Answers0