vue.js 输入的类型. meta.env

3htmauhk  于 2023-01-31  发布在  Vue.js
关注(0)|答案(8)|浏览(158)

我现在使用的框架(vite)可以将环境变量注入import.meta.env
我以前能够创建一个文件env.d.ts来为process.env提供类型

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      GITHUB_AUTH_TOKEN: string;
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    }
  }
}

我已经尝试了以下方法,但不起作用。

declare global {
  namespace NodeJS {
    interface ImportMeta {
      GITHUB_AUTH_TOKEN: string;
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    }
  }
}
5t7ly7z5

5t7ly7z51#

我也遇到过类似的问题,并通过以下方法解决了它
tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "target": "ESNext",
    "types": ["vite/client"]
  }
}

vite作为开发依赖项安装。

hmtdttj4

hmtdttj42#

它记录在这里:https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#support-for-importmeta
你就快到了

interface ImportMeta {
  env: {
    GITHUB_AUTH_TOKEN: string;
    NODE_ENV: 'development' | 'production';
    PORT?: string;
    PWD: string;
  };
}

但是要注意,在vite中,所有环境变量都必须以VITE_为前缀,因此这些环境变量在应用程序中都不可用。

weylhg0b

weylhg0b3#

我用了以下方法让它工作起来-

interface ImportMetaEnv {
  VITE_PORT?: string;
  VITE_AUTH_TOKEN?: string;
}
ua4mk5z4

ua4mk5z44#

根据www.example.com上的文档https://vitejs.dev/guide/env-and-mode.html#intellisense您可以执行以下操作:

// env.d.ts
interface ImportMetaEnv extends Readonly<Record<string, string>> {
  readonly VITE_APP_TITLE: string
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
cygmwpex

cygmwpex5#

以上答案中链接到的此文档的URL已更新。
此外,env.d.ts应该放在src/目录中,并且您需要在文件顶部有一个引用字符串。
下面是一个完整的工作示例:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

使用VITE_以外的变量前缀

如果你不想使用默认的变量前缀,你可以在你的Vite配置中修改它:

{
  envPrefix: 'YOURPREFIX_',
}
qyuhtwio

qyuhtwio6#

如果您使用的是SvelteKitv1.0.0-next.120和Vite 2.4.0,则env必须是global.d.ts中ImportMeta的属性。

interface ImportMeta {
  env: {
    VITE_DATABASE_URL?: string
    VITE_WEB_URL?: string
    VITE_BRAINTREE_GATEWAY?: string
    VITE_BRAINTREE_DESCRIPTOR?: string
    VITE_RECAPTCHA_SECRET_KEY?: string
    VITE_EMAIL_FROM?: string
    VITE_EMAIL_ADMINS?: string
    VITE_SEND_IN_BLUE_KEY?: string
    VITE_SEND_IN_BLUE_URL?: string
    VITE_RECAPTCHA_SITE_KEY?: string
  }
}
fnatzsnv

fnatzsnv7#

我发现,如果你需要import另一个类型,vite文档中的例子就不起作用了。
假设VITE_CUSTOM_ENV_VARIABLE的类型为MyCustomType

interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: import('./<your_path>/MyCustomType').MyCustomType

  // Optionally describe the original values from vite, needed if you remove <reference types="vite/client" /> line as I did
  readonly BASE_URL: string;
  readonly MODE: string;
  readonly DEV: boolean;
  readonly PROD: boolean;
  readonly SSR: boolean;
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

P.S.我还建议删除/// <reference types="vite/client" />行,因为否则VITE_CUSTOM_ENV_VARIABLE类型将为MyCustomTypeany;

2admgd59

2admgd598#

我发现的最简洁的方法基本上是扩展它们的类并分别添加我们的键:

// env.d.ts

/**
 * Our environment variables.
 * 
 * (See https://stackoverflow.com/a/75272079/3423324)
 */
interface ImportMetaEnvCustom extends Readonly<Record<string, string>> {
  readonly VITE_API_SERVER_HOST: string,
  readonly VITE_API_SERVER_PORT: string
}

interface ImportMeta extends import('vite/types/importMeta').ImportMeta {
  // additionally pull in the original values from vite, so you won't need <reference types="vite/client" /> any longer.
  readonly env: ImportMetaEnvCustom & import('vite/types/importMeta').ImportMetaEnv
}

在本例中,VITE_API_SERVER_HOSTVITE_API_SERVER_PORT现在已正确记录。
您还可以保留默认的Vite变量(如BASE_URL)以及其他meta.*提示(如import.meta.glob()

相关问题