Nuxt Axios Динамический URL

Question

Мне удается выучить нукст с помощью следующего урока

https://scotch.io/tutorials/implementing-authentication-in-nuxtjs-app

В уроке показано, что

axios: {
  baseURL: 'http://127.0.0.1:3000/api'
},

это точка на localhost, этоне является проблемой для моей разработки,

, но когда дело доходит до развертывания, как я могу изменить URL-адрес на основе URL-адреса браузера,

, если система используется в локальной сети, это будет 192.168.8.1:3000/api

, если система используется снаружи, это будет example.com:3000/api

С другой стороны, в настоящее время я использую adonuxt (adonis + nuxt), оба прослушивают один и тот же порт (3000).

В будущем я могу разделить его на сервер (3333) и клиент (3000)

Поэтому ссылки API будут

localhost:3333/api

192.168.8.1:3333/api

example.com:3333/api

Как мне получить динамический APIURL в зависимости от браузера и порта коммутатора?

Answer 1

Вам не нужен baseURL в nuxt.config.js.

Сначала создайте файл plugins / axios.js (посмотрите здесь ) и напишите так.

export default function({ $axios }) {
  if (process.client) {
    const protocol = window.location.protocol
    const hostname = window.location.hostname
    const port = 8000
    const url = `${protocol}//${hostname}:${port}`
    $axios.defaults.baseURL = url
  }