打字稿插件中的 NuxtJs publicRuntimeConfig答案

【问题标题】：NuxtJs publicRuntimeConfig in typescript plugin打字稿插件中的 NuxtJs publicRuntimeConfig
【发布时间】：2021-06-15 15:23:50
【问题描述】：

我正在尝试在 TypeScript 插件中使用公共 publicRuntimeConfig，但没有成功。使用 JS 插件我没有问题。但现在我真的卡住了，我想我看的地方不对。

问题是如何在 TypeScript 插件中访问此配置？

这是我的 nuxt.config.js：

export default {
    ssr: false,
    ...
    
    publicRuntimeConfig: {
        baseURL: 'http://localhost:3000'
    },
}

我的插件：

import Vue from 'vue'
import { Configuration, FolderApi, Folder } from '~/build/openapi/index'
import { AbstractApi } from '~/plugins/api/abstractApi'
declare module 'vue/types/vue' {

    interface Vue {
        $RfolderApi: MyFolderApi
    }
}

export class MyFolderApi extends AbstractApi {
    private folderApi: FolderApi

    constructor() {
        super()
        // How to access to app.$config ? Of course they are undefined in this example... What to do to import it ?
        this.folderApi = new FolderApi(new Configuration({}), app.$config.baseURL) 
    }
    
    ...
}

Vue.prototype.$RfolderApi = new MyFolderApi()

有什么想法吗？提前致谢。

【问题讨论】：

你得到什么样的“不成功”：TypeScript 编译中的错误？运行时 JavaScript 错误？不正确的行为？请将其添加到问题中。
你好@kdau，我不知道如何访问 app.$config.baseURL。当然 app 和 $config 是未定义的，因为它们必须来自某个地方......

标签： typescript plugins nuxtjs

【解决方案1】：

Nuxt 以两种方式提供$config：this.$config 在每个组件实例上，context.$config 传递给“特殊的 nuxt 生命周期区域，例如 asyncData、fetch、plugins、middleware和nuxtServerInit" (docs)。

您似乎需要在组件外部访问$config，因此您需要在请求周期的早期检索它。特别是，由于您正在对 Vue.prototype 进行变异，这感觉很适合 Nuxt 意义上的 plugin，这与您的代码中的内容并不完全一样。

如果您将插件文件放在plugins 目录中并从nuxt.config.js 中的plugins 数组中引用它（有关更广泛的示例，请参见上面的链接），您可以像这样重写它以访问$config：

import Vue from 'vue'
import { Configuration, FolderApi, Folder } from '~/build/openapi/index'
import { AbstractApi } from '~/plugins/api/abstractApi'

declare module 'vue/types/vue' {
    interface Vue {
        $RfolderApi: MyFolderApi
    }
}

export class MyFolderApi extends AbstractApi {
    private folderApi: FolderApi

    constructor(baseURL: string) {
        super()
        this.folderApi = new FolderApi(new Configuration({}), baseURL) 
    }
    
    // ...
}

export default function({ $config }) {
  Vue.prototype.$RfolderApi = new MyFolderApi($config.baseURL)
}

$config 对象的类型声明 (NuxtRuntimeConfig) 的值类型为 any，因此代码将按原样运行，但您也可以扩展声明以使您的属性显式，如下所示：

declare module '@nuxt/types/config/runtime'
{
    interface NuxtRuntimeConfig
    {
        baseURL: string;
    }
}

【讨论】：

谢谢@kdau，这正是我想要的。