Как я могу получить переменную из .env для реквизита в VUE файле?

Question

Как я могу вернуть значение переменной env в значение по умолчанию для реквизита в файле vue?

Это мой .env

API_BASE_URL=http://192.168.1.101:1025/doctruyenserver/

А это мой код из файла vue:

<script>
export default {
    props: {
        dataUrl: {
            default: ''+process.env.VUE_APP_API_BASE_URL,
        }, 
    },
</script>

То, что я ожидал, это вернется "http://192.168.1.101:1025/doctruyenserver/" но вместо этого он возвращает "undefined"

Answer 1

Например, вы можете создать файл .env.development и env.production в корневой папке приложения Vue, например,

  +-- node_modules
  +-- src
  +-- .env.development
  +-- .env.production
  +-- package.json

...

Внутри .env.development и .env.production вам необходимообъявить переменную, начинающуюся с VUE_APP_, как

VUE_APP_API_BASE_URL=http://192.168.1.101:1025/doctruyenserver/

После этого вы можете использовать переменную в компоненте Vue, например,

 export default {
        name: 'Component',
        data() {
            return {
                 dataUrl: {
                     default: ''+process.env.VUE_APP_API_BASE_URL,
                 }
            }
        }
...

С официальной документацией можно ознакомиться здесь.