Объявите URL Api один раз во всем приложении Nuxt. js - PullRequest
Новая
       70

Объявите URL Api один раз во всем приложении Nuxt. js

1 голос
/ 03 февраля 2020

Я использую CMS для заполнения моего приложения Nuxt. js и объявляю URL API следующим образом.

в nuxt.config. js, для генерации динамич c маршрутов, у меня есть: 

  const apiUrl = 'http://xxx.xx.xx.xx:xxxx'

  generate:{
    routes: function () {
      return axios.get(apiUrl + '/pages')
        .then((res) => {
          return res.data.map(page =>{
            return page.slug
          })
      })
    }
  },
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: apiUrl + '/graphql'
      }
    }
  }

в хранилище / индекс. js, чтобы быть доступными в моем макете, страницах и компонентах, у меня есть: 

export const state = () => ({
  apiUrl: 'http://xxx.xx.xx.xx:xxxx'
})

Как видите, недостатком здесь является то, что const объявляется в двух разных местах, что может быть не таким уж большим делом, но мне кажется "неправильным". Кажется невозможным получить данные из хранилища в nuxt.config, js, и невозможно получить данные из nuxt.config. js в мои страницы / компоненты, если не импортировать их каждый раз. Нет ли более чистого способа установить это, или я все равно делаю это неправильно?

РЕДАКТИРОВАТЬ

Я мог бы также усложнить свой вопрос. В основном то, что мне нужно в моем макете, страницах и компонентах, это чистый apiURL. Это необходимо, чтобы быть первой частью URL, когда я загружаю изображения из API.

Я использую Apollo, поэтому я получаю все данные с этим, но URL-адреса изображений возвращаются как uploads/image_name.jpg. Это означает, что на самом деле мне нужен httpEndpoint (из настроек apollo внутри nuxt.config. js), который будет доступен в моих компонентах как часть полного URL-адреса изображений.

Спасибо

Ответы [ 2 ]

3 голосов
/ 03 февраля 2020

То, что вы хотите, это переменная окружения.

Здесь это описано более подробно. https://nuxtjs.org/api/configuration-env/

Что мне больше нравится, так это модуль .dotenv https://github.com/nuxt-community/dotenv-module

Вы просто создадите файл .env в root вашего проекта и запишите: 

API_URL=http://xxx.xx.xx.xx:xxxx

Тогда вы сможете использовать его повсюду в ваших компонентах, страницы и т. д. c. через процесс и контекст. this.$process.env.API_URL

Если вы также хотите использовать эту переменную внутри вашего nuxt.config.js, вы можете просто require('dotenv').config() и использовать ее там же.

1 голос
/ 03 февраля 2020

nuxt по умолчанию обеспечивает модуль ax ios конфигурациями, с помощью которых вы можете легко добавить ax ios в ваш файл nuxt.config.js, например: 

axios: {
    //axios options
},

, в вашем случае вы можете установить base url в вашем nuxt.config.js файле, например: 

axios: {
    baseURL: 'http://localhost:3000/'
},

, тогда каждый запрос, который отправляется с помощью ax ios, имеет baseUrl перед ним, например: 

async asyncData({ $axios }) {
  const items = await $axios.$get('/items')
  return { items }
}

этот код отправьте запрос на получение localhost:3000/items

PS1: если вы хотите изменить базовый URL для одного запроса, вы можете передать полный адрес $ get как: 

async asyncData({ $axios }) {
  const items = await $axios.$get('http://mytestsite.com/items')
  return { items }
}

PS2: для получения дополнительной информации. информационный визит nuxt ax ios сайт

...