在整个 Nuxt.js 应用程序中声明 Api 的 URL 一次

Question

我正在使用 CMS 来填充我的 Nuxt.js 应用程序并声明 api URL 如下。

在nuxt.config.js中生成动态路由，我有：

  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'
      }
    }
  }

在 store/index.js 中，为了可以在我的布局、页面和组件中访问，我有：

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

如您所见，这里的缺点是在两个不同的地方声明了 const，这可能不是什么大问题，但我觉得 "wrong"。似乎无法从 nuxt.config,js 中的存储中获取数据，也无法从 nuxt.config.js 中获取数据到我的 pages/components 中，除非每次都导入它。没有更简洁的方法来设置它，还是我以错误的方式进行设置？

编辑

我可能也把我的问题复杂化了。基本上我在布局、页面和组件中需要的是纯 apiURL。当我从 api.

加载图像时，这需要成为 url 的第一部分

我正在使用 apollo，所以我用它获取了所有数据，但是图像 url 像 uploads/image_name.jpg 一样返回。这意味着我真正需要的是 httpEndpoint（来自 nuxt.config.js 内的 apollo 设置）作为完整图像的一部分在我的组件中可用 url.

谢谢

Answer 1

你要的是环境变量。

这里描述的比较详细。 https://nuxtjs.org/api/configuration-env/

我更喜欢 .dotenv 模块 https://github.com/nuxt-community/dotenv-module

您只需在项目的根目录中创建一个 .env 文件并写下：

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

然后您可以通过流程和上下文在您的组件、页面等任何地方使用它。 this.$process.env.API_URL

如果您还想在 nuxt.config.js 中使用该变量，您可以简单地 require('dotenv').config() 并在那里也使用它。

Answer 2

nuxt 默认提供 axios 模块配置通过使用它，您可以轻松地在 nuxt.config.js 文件中添加 axios，例如：

axios: {
    //axios options
},

在您的情况下，您可以像这样在 nuxt.config.js 文件中设置基础 url：

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

那么每个用axios发送的请求前面都有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 axios 网站

Answer 3

我认为关于此事有一些更新。

通过使用 runtimeConfig (public / private)。 https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config#introducing-the-nuxtjs-runtime-config

我也偶然发现了这个 link。希望对您有所帮助。

我使用的是 nuxt 版本 2.15.7

在整个 Nuxt.js 应用程序中声明 Api 的 URL 一次

Declare URL of Api once in entire Nuxt.js app

store

vue.js

vuex

nuxt.js