nuxt中的环境变量

Question

我正在使用asyncData和axios从我的静态文件夹中获取local.json文件。我只想暂时在本地获取它，因为我正在等待构建API时添加了所有方法。

要使用异步，我需要完整的路径和URL，所以我需要一个env变量，但是我在服务器上始终收到403或出现随机错误。我需要将路径设置为axios调用中托管的URL。

如果我用我的localIP替换context.env.baseUrl，它可以工作，但是我需要将该URL作为“我的托管URL”。我需要将此变量设置为变量，因为我将gitlab与其他URL一起使用

异步数据

asyncData(context) {
        return axios.get(context.env.baseUrl+'/products.json')
        .then(response => {
        return {
           servers: response.data.products
        }
    })
    .catch(e => context.error(e))
 }

nuxt.config.js

env: {
  baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}

Answer 1

您可以创建axois实例并设置基本URL以避免麻烦。

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
});

参见：https://github.com/axios/axios#axioscreateconfig

Answer 2

我知道的最简单的方法之一就是使用axios module for nuxt。通过该模块可以解决许多axios配置难题，而不是使用独立的axios包。然后在您的nuxt.config.js

像这样添加此内容

axios: {
  baseURL: () => {
    if (process.env.NODE_ENV !== "production") {
      return 'localhost:5000/api/';    
    }
    return https://www.example.com/api/;
  }
}

在NUXT页面中的用法

async asyncData({ $axios }) {
    try {
      let response = await $axios.get("/your-api-route");
      return response;
    } catch (err) {
      console.log(err);
    }
  }