是否可以将变量定义为基于 nuxt.js 的 url

Question

我想做的是为我的 API 定义一个基础 url 变量，它可以在 nuxt 应用程序的任何地方调用。例如，我正在尝试从我的 API 存储中调用图像，如下所示

<img :src="`${baseUrl}/****/****.png`">

假设我可以定义变量，那么当 API 域更改时，我不需要更改每个 img url。或者我会非常感谢介绍任何更好的方法来从 API 存储调用图像。顺便说一句，我使用 Laravel 作为 API.

Answer 1

您可以使用 runtimeConfig 之一，publicRuntimeConfig 或 privateRuntimeConfig 取决于您的要求

nuxt.config.js

export default {
  publicRuntimeConfig: {
    baseURL: 'https://nuxtjs.org'
  },
  privateRuntimeConfig: {
    apiSecret: 'something_private'
  }
}

添加后，此变量将在 $config 下在您的 Nuxt 应用中可用，如下所示

在模板中

<template>
  <p>Our Url is: {{ $config.baseURL}}</p>
</template>

在您使用上下文的地方（插件、asyncData 等）

<script>
  asyncData ({ $config: { baseURL } }) {
    const posts = await fetch(`${baseURL}/posts`)
      .then(res => res.json())
  }
</script>

Is it possible to define an variable as base url on nuxt.js