如何在TypeScript文件中访问nuxt.config.js中定义的配置变量

问题根因 #

1. privateRuntimeConfig 客户端不可见 #

privateRuntimeConfig是Nuxt专门设计用来存储服务端敏感配置的字段，所有运行在客户端的代码都无法读取该配置下的变量。如果你需要在前端调用后端接口时使用apiURL，需要将其移动到publicRuntimeConfig中：

// 修正后的nuxt.config.js配置
publicRuntimeConfig: {
  // 客户端需要用到的配置放在public下
  apiURL: process.env.API_URL,
},
privateRuntimeConfig: {
  // 仅服务端使用的敏感配置保留在private下
  proxyBaseURL: process.env.BASE_URL,
},

注意：如果你确认apiURL仅服务端使用，不需要暴露给前端，可以保留在privateRuntimeConfig中，但必须保证后续的接口请求方法仅在服务端侧代码中执行，客户端调用依然拿不到配置值。

2. 上下文参数未正确传入 #

你封装的sendInquiry方法依赖Nuxt的上下文对象读取配置，调用时必须显式传入合法的context参数，不同场景的传参方式如下：

• 在页面/组件的asyncData/fetch方法中调用：直接传入方法自带的context参数即可
  示例：

  <script lang="ts">
  import { sendInquiry } from '~/utils/api'
  export default {
    async asyncData(context) {
      const inquiryRes = await sendInquiry(你的请求参数, context)
      return { inquiryRes }
    }
  }
  </script>
  

• 在选项式API的客户端方法中调用：可以直接通过this.$config.apiURL读取配置，无需额外传context，你也可以修改工具函数直接接收$config作为参数，使用更灵活
• 在组合式API中调用：通过useContext获取上下文后传入即可
  示例：

  import { useContext } from '@nuxtjs/composition-api'
  import { sendInquiry } from '~/utils/api'
  
  const { $config } = useContext()
  const res = await sendInquiry(请求参数, { $config } as Context)
  

优化方案：封装为Nuxt插件避免重复传参 #

你可以将API请求直接封装为Nuxt插件，自动注入上下文，无需每次调用时手动传context：

1. 新建/plugins/api.ts文件：

import { Plugin } from '@nuxt/types'
import axios, { AxiosResponse } from 'axios'
import { IRequestInquiry, IResponseInquiry } from '~/models/inquiry'

// TS类型声明
declare module 'vue/types/vue' {
  interface Vue {
    $api: {
      sendInquiry: (createInquiry: IRequestInquiry) => Promise<IResponseInquiry>
    }
  }
}

const apiPlugin: Plugin = (context, inject) => {
  // 插件内直接读取上下文的配置
  const apiURL = context.$config.apiURL

  const sendInquiry = async (createInquiry: IRequestInquiry): Promise<IResponseInquiry> => {
    const axiosResponse: AxiosResponse = await axios.post(apiURL, createInquiry)
    return { status: axiosResponse.status, results: axiosResponse.data }
  }

  // 注入到Nuxt实例中
  inject('api', { sendInquiry })
}

export default apiPlugin

2. 在nuxt.config.js中注册插件：

plugins: [
  '~/plugins/api.ts'
]

3. 调用方式：
   • 选项式API客户端方法：const res = await this.$api.sendInquiry(请求参数)
   • asyncData/fetch中：const res = await context.app.$api.sendInquiry(请求参数)

内容的提问来源于stack exchange，提问作者Nam