vue3+ts如何全局使用import.meta

Tony_StarkM

已于 2024-05-10 14:57:24 修改

阅读量461

点赞数 1

文章标签： vue

于 2024-05-10 12:24:59 首次发布

原文链接：https://blog.csdn.net/qq_42975998/article/details/124815891

版权

1、根目录下新建.env.development和.env.production

文件名必须是这样定义，否则读取不到

其中写node环境变量和其它变量
其它变量必须要以VITE_开头

NODE_ENV = "development"
VITE_BASE_URL = "http://127.0.0.1:3333"

2、在tsconfig.json中添加"types": [ "vite/client" ]，用来提供import.meta.env 上 Vite 注入的环境变量的类型定义

"compilerOptions": {
	"types": [  "vite/client" ]
}

3、在src目录下env.d.ts中添加以下代码，可以在在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示

interface ImportMetaEnv {
	readonly VITE_BASE_URL: string
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}
 
interface ImportMeta {
  readonly env: ImportMetaEnv
}

踩坑：如果不配置2、3点的话的话可能就会出现以下ts错误提示：类型ImportMetaEnv上不存在属性"env"。如果配置后仍然报错，需要重启编辑器

4、使用import.meta.env.VITE_BASE_URL获取环境变量

console.log(import.meta.env.VITE_BASE_URL) 
// http://127.0.0.1:3333

5、通过
--mode development和--mode production
在package.json中配置模式


  "scripts": {
    "dev": "vite --mode development --open",
    "build": "vue-tsc --noEmit && vite build",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview",
  },