Переменные Nuxt + Vue + Axios + Enviroment - PullRequest
Новая
       21

Переменные Nuxt + Vue + Axios + Enviroment

0 голосов
/ 16 апреля 2019

Я не могу предоставить 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() должно быть вверху

1 Ответ

1 голос
/ 16 апреля 2019

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

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

Youможно объявить базовый 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, чтобы они были доступны для всех компонентов.

...