打字稿插件中的 NuxtJs publicRuntimeConfig

Question

我正在尝试在 TypeScript 插件中使用 public 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()

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

Answer 1

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

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

如果您将插件文件放在 plugins 目录中并从 nuxt.config.js 中的 plugins 数组中引用它（请参阅上面的 link 以获得更广泛的示例），您可以像这样重写它以访问 $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;
    }
}

打字稿插件中的 NuxtJs publicRuntimeConfig

NuxtJs publicRuntimeConfig in typescript plugin

plugins

typescript

nuxtjs