Блог

Я не могу предоставить axios baseUrl, используя переменную среды

Я использую nuxt / vue / axios

То, что у меня есть, примерно:

 // axios.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = process.env.BASE_URL
Vue.use(VueAxios, axios)
  

и

 // index.vue (front page as it appears on the client)

populateFilters () {
  Vue.axios.get('filters').then((response) => {
    this.$store.commit('data/filters', response.data)
  })
    .catch((e) => {
      console.error(e)
    })
}
  

и внутри nuxt.config.js

   // nuxt.config.js
  build: {
    extractCSS: true,
    extend (config, ctx) {
    // Run ESLint on save

    const envLoad = require('dotenv').config()

    if (envLoad.error){
      throw result.error
    }
  }
},
  

console.log(process.env.BASE_URL) выводит соответствующую строку подключения в CMD, однако в веб-браузере Chrome выводится «undefined», и я получаю следующую ошибку

 GET http://localhost:3000/filters 404 (Not Found)
  

это означает, что axios (вероятно) по умолчанию http://localhost:3000 используется всякий раз, когда baseUrl для axios не был установлен.

Я думаю, что проблема заключается в

Пара сервер / клиент, загружаемая nuxt, имеет разные контексты или сервер загружает axios до загрузки переменных среды

Что мне нужно

Мне нужно иметь возможность либо:

1. создайте env-файлы, содержащие (среди прочего) BASE_URL
2. определите эти переменные среды где-нибудь в коде ( nuxt.config.js ?)

Решение Пожалуйста, ознакомьтесь с принятым ответом

Кроме того, установите nuxtjs / dotenv

 npm install @nuxtjs/dotenv
  

и сделайте свой nuxt.config.js внешний вид похожим:

   // nuxt.config.js
  require('dotenv').config()

  module.exports = {

  modules: [
  '@nuxtjs/dotenv',
      '@nuxtjs/axios',
  ],

  axios: {
    baseURL: process.env.BASE_URL
  },
}
  

обратите внимание, что это require('dotenv').config() должно быть вверху

Вы можете использовать модуль nuxt axios. Вы можете объявить его в разделе модуля вашего nuxt.config.js так что вам не нужен ваш файл axios.js . Это описано здесь https://github.com/nuxt-community/axios-module#usage

Загрузив его в модули в nuxt.config.js файл у вас будет экземпляр axios, доступный с помощью этого файла.$axios в ваших компонентах.

Вы можете объявить базовый URL в nuxt.config.js

 modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    ['@nuxtjs/axios', {
      baseURL: 'http://jsonplaceholder.typicode.com'
    }]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },
  

Для «других переменных среды» вы можете использовать хранилище vuex, чтобы они были доступны для всех компонентов.