Переменные окружения недоступны в main.js

Question

Я создал проект с помощью Vue-CLI 2.9.6, и теперь я хотел бы использовать API_URL из .env, но он не доступен в main.js. Как я могу использовать API_URL из .env в main.js?

Код:

import 'bootstrap-vue/dist/bootstrap-vue.css';
import axios from 'axios';

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';
import store from './store/store';
import Logger from './utils/Logger';

Vue.use(BootstrapVue);

Vue.config.productionTip = false;

const baseAxios = axios.create({
  baseURL: process.env.API_URL,
});

Vue.prototype.$http = baseAxios;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
});

Мне нужно использовать API_URL, потому что я хотел бы установить baseUrl для axios.

Answer 1

Только переменные, которые начинаются с VUE_APP_, будут статически встроены в клиентский пакет с помощью webpack.DefinePlugin. Вы можете получить к ним доступ в своем коде приложения:

https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code