Nuxt Axios 动态网址

Question

我设法通过使用以下教程来学习 nuxt

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

在教程中，它表明

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

它指向本地主机，这对我的开发来说不是问题，

但是在部署时，如何根据浏览器 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

如何实现基于浏览器和交换机端口的动态api url？

Answer 1

在 nuxt.config.js 中不需要 baseURL。

首先创建一个 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
  }