在整个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
          })
      })
    }
  }

在store / index.js中，要在我的布局，页面和组件中进行访问，我具有：

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

您可以看到，这里的缺点是const在两个不同的位置声明，这可能没什么大不了，但对我来说却是“错误的”。除非每次都将其导入，否则似乎无法从nuxt.config.js中的存储中获取数据，也无法从nuxt.config.js中的数据获取到我的页面/组件中。没有更干净的方法来进行设置，还是我做错了吗？

谢谢

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()并在那里使用它。