vue.js - 在整个 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 是在两个不同的地方声明的，这可能不是什么大问题，但对我来说感觉“错误”。似乎不可能从 nuxt.config,js 中的存储中获取数据，也不可能从 nuxt.config.js 中获取数据到我的页面/组件中，除非每次都导入它。是否没有更干净的方法来设置它，或者我是否以错误的方式进行了操作？

编辑

我可能也把我的问题复杂化了。基本上我的布局、页面和组件中需要的是纯 apiURL。当我从 api 加载图像时，这需要成为 url 的第一部分。

我使用的是 apollo，因此我可以通过它获取所有数据，但返回的图像网址类似于 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() 并在那里使用它。