правильно использовать переменные ENV в vue-cli

Question

Так что я совершенно новичок в Vue-Cli и следую учебному пособию по использованию внешнего интерфейса Vue с бэкэндом Rails.Я настраиваю Axios для обработки моих запросов.

Моя проблема:

Я пытаюсь установить ENV_VAR для моей константы API_URL, в этот момент, когда я пытаюсь console.log API_URL, я получаю следующую ошибку:

Uncaught ReferenceError: process is not defined
at <anonymous>:1:13

У меня есть следующее для config / dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_API_URL: '"http://localhost:3000/api/fuzeisp/v1"'
})

, и я пытаюсь вызвать этот ENV в src / backend / axios / index.js импорт axios из 'axios'

const API_URL = process.env.ENV_API_URL

const securedAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application.json'
  }
})

Я пытался читать документы, но по какой-то причине я не могу сделать из этого ни головы, ни хвоста!любая помощь здесь будет принята с благодарностью!Пожалуйста, если вам нужна дополнительная информация, я с удовольствием предоставлю ее для вас!

Заранее спасибо.

Answer 1

vue cli использует dotenv для анализа .env файлов с их содержимым, добавляя их к объекту process.env.Однако эти переменные будут доступны только во время сборки (поскольку process.env является глобальным свойством узла environemnt).

Код на стороне клиента вообще не будет иметь доступа к объекту process,Тем не менее, Vue Cli выручает!Он читает process.env переменных во время сборки и заменяет их соответствующими значениями - так что вы можете использовать их в своем коде на стороне клиента. ПРИМЕЧАНИЕ: Заменяет только те переменные, перед которыми стоит VUE_APP_;например, VUE_APP_BASE_URL=www.myapp.com.

Подробнее об этом здесь

Answer 2

, поэтому я смог записать вывод VUE_APP_ENV_API_URL, добавив в мой файл App.vue следующее:

<script>
export default {
  name: 'App',
  mounted () {
    console.log(process.env.VUE_APP_ENV_API_URL)
  }
}
</script>