Vue 3.x 中使用 ImportMeta.env 踩坑日记

在 Vue 3.x 开发中，我们经常需要在组件或模块中使用环境变量。在 Vue 2.x 中，我们可以直接通过 process.env 对象访问环境变量，但是在 Vue 3.x 中，这种情况发生了变化。

为了在 Vue 3.x 中使用环境变量，我们需要使用 import.meta.env 对象。该对象是一个只读对象，它提供了对环境变量的访问。但是，在使用 import.meta.env 时，我遇到了一个奇怪的问题——类型 "ImportMeta" 上不存在属性 "env"。

一开始，我以为是我对 Vue 3.x 的语法不熟悉，导致了错误。于是我查阅了官方文档，发现我没有理解错误，import.meta.env 确实是访问环境变量的正确方法。

经过一番排查，我发现问题出在 Vite 中。Vite 是一个用于构建和开发 Vue.js 应用程序的工具。它可以为应用程序打包和提供服务，并可以优化构建过程。

在使用 Vite 构建 Vue 3.x 项目时，如果我们想要在组件或模块中使用环境变量，需要在对应的文件中使用 VITE_ 前缀来声明环境变量。例如，如果我们想在组件中使用 BASE_URL 环境变量，我们需要在组件所在的文件中声明 VITE_BASE_URL。

我按照文档中的说明，在组件所在的文件中添加了 VITE_BASE_URL 环境变量的声明。但是，当我再次运行应用程序时，错误仍然存在。

经过进一步的调试，我发现 Vite 在编译组件时，没有将 VITE_BASE_URL 环境变量传递给组件。我查看了 Vite 的文档，发现有一个选项可以控制 Vite 是否传递环境变量给组件。

这个选项是 define，它是一个对象，用于定义传递给组件的常量或环境变量。我们可以通过在 vite.config.js 文件中配置 define 选项，来解决这个问题。

// vite.config.js
export default {
  define: {
    'import.meta.env.BASE_URL': '"https://example.com"',
  },
}

添加了 define 配置之后，我再次运行应用程序，错误消失了。import.meta.env 对象现在可以正常访问环境变量了。

通过这个踩坑经历，我学到了在 Vue 3.x 中使用 import.meta.env 时，需要特别注意 Vite 的配置。如果我们想要在组件或模块中使用环境变量，需要在对应的文件中使用 VITE_ 前缀来声明环境变量，并在 vite.config.js 文件中配置 define 选项，将环境变量传递给组件。

希望这个踩坑日记能够帮助其他 Vue 3.x 开发人员避免类似的问题。