在vue3中使用import.meta.env

vue3使用import.meta.env

在 Vue 3 中，import.meta.env 提供了一个机制来访问模块的元信息，包括环境变量。

这个特性是 JavaScript 模块系统的一个部分，它允许开发者在编写代码时获取到关于当前模块的信息。

以下是如何在 Vue 3 中使用 import.meta.env 的一些示例：

访问环境变量

在 .env 文件中定义的环境变量可以通过 import.meta.env 访问。

例如，如果你有一个 .env 文件，它包含一个名为 VUE_APP_API_URL 的变量：

VUE_APP_API_URL=https://myapi.com

你可以在 Vue 3 项目的任何地方访问这个变量：

const apiUrl = import.meta.env.VUE_APP_API_URL;
console.log(apiUrl); // 输出: https://myapi.com

条件导入

import.meta.env 也可以用来根据环境变量进行条件导入。

例如，你可以根据是否处于生产环境来导入不同的模块：

let logger;
 if (import.meta.env.MODE === 'development') {
   logger = require('./logger.js').default;
 } else {
   logger = require('./logger.prod.js').default;
 }

使用环境变量作为 URL 路径

你可以使用环境变量来构建 URL 路径，这样你的应用程序就可以根据不同的环境连接到不同的后端服务：

const baseUrl = import.meta.env.VUE_APP_BASE_URL;
const apiUrl = `${baseUrl}/api`;

注意事项

只有以 VUE_APP_ 开头的环境变量才会被 Vue CLI 打包到 JavaScript 文件中。

这是为了确保只有通过 Vue CLI 定义的环境变量才会被包含在最终的构建文件中。

• import.meta.env 中的环境变量是只读的，你不能修改它们的值。
• import.meta.env 支持现代 JavaScript 模块语法，因此在较老的浏览器中可能不被支持。确保你的应用程序的目标浏览器环境支持 ES6 模块。

通过使用 import.meta.env，你可以在 Vue 3 应用程序中更灵活地处理环境相关的配置，使得你的应用更容易适应不同的运行环境。

import.meta.env报错：Property ‘env‘ does not exist on type ‘ImportMeta‘

用vite创建vue3项目叠加ts，访问import.meta中的变量。

问题

代码提示import.meta中只有url，手动访问env会报错：Property 'env' does not exist on type 'ImportMeta'，但是浏览器中可以打印。

解决方法

（方法1和方法2在我的项目中有用，方法3和方法4大家说可以，可能是环境问题，在我的项目中没有起作用，但是大家说有用，那就记录下来，以后有机会再试一试）：

1、忽略类型校验：

//@ts-ignore
console.log('vite', import.meta.env)

2、使用类型断言：

console.log('vite', (import.meta as any).env)

3、在tsconfig.json下的compilerOptions中

增加："types'': [''vite/client'']

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

4、在.d.ts文件中声明模块：

declare interface ImpoertMetaEnv {
  readonly MODE: string
  // readonly VITE_BASE_URL: string
  // readonly VITE_TIME_OUT: number
}
 
declare interface ImpoertMeta {
  readonly env: ImpoertMetaEnv
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。