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、{{1 }}、fetch、plugins 和 middleware" (docs)。

您似乎需要在组件外部访问 nuxtServerInit，因此您需要在请求周期的早期检索它。特别是，由于您对 $config 进行了变异，因此感觉很适合 Nuxt 意义上的 plugin，而这与您在代码中所拥有的并不完全相同。

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

$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

打字稿插件中的 NuxtJs publicRuntimeConfig

1 个答案: