Vue 3 项目外部配置: 使用 Vite 自定义环境变量

在 Vue 3 项目中，可以使用 Vite 的自定义环境变量功能来读取外部配置。以下是一种常见的方法：\n\n1. 在项目根目录下创建一个名为 .env 的文件，用于存储环境变量。例如：\n\n\nVITE_API_URL=https://api.example.com\nVITE_API_KEY=123456789\n\n\n2. 在 vite.config.js 文件中配置 Vite 来加载这些环境变量。例如：\n\njavascript\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n // ...\n envDir: '.',\n // ...\n})\n\n\n上述配置的 envDir 属性指定了环境变量文件的目录。在这个例子中，.env 文件位于项目的根目录下。\n\n3. 在 Vue 3 项目中的代码中，可以通过 import.meta.env 来访问这些环境变量。例如：\n\njavascript\nconsole.log(import.meta.env.VITE_API_URL) // 输出: https://api.example.com\nconsole.log(import.meta.env.VITE_API_KEY) // 输出: 123456789\n\n\n这样，你就可以在 Vue 组件或其他代码中使用这些环境变量了。\n\n需要注意的是，由于 Vite 是基于 ES 模块的构建工具，因此环境变量中的值都会被视为字符串。如果需要将环境变量的值转换为其他类型，可以使用相应的转换函数，例如 parseInt() 或 parseFloat()。