Question

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

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

URL必须是动态的，因为我使用的是gitlab CI，并且URL会根据我所在的分支而变化，因此我无法设置开发，生产URL

如果我用我的localIP替换context.env.baseUrl，它可以工作，但是我需要将该URL设为“我的托管URL”。我需要将此变量设置为变量，因为我正在使用具有不同URL的gitlab

异步数据

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: {
  // The baseUrl needs to be dynamic - whatever the server is on
  baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}

Answer 1

如果要使用同一项目中存在的静态文件，则只需导入/请求它，而不使用axios。参见下面的示例

function update() {
    //Add Nodes
    simulation.nodes(graph.nodes)

    updateNodes();

    simulation.on("tick", ticked);


    //Add links
    simulation.force('link').links(graph.links)

    updateLinks();
}

Answer 2

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

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

请参阅：https://github.com/axios/axios#axioscreateconfig

Answer 3

我知道的最简单的方法之一就是使用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);
    }
  }

nuxt中的Env变量

3 个答案: