共计 1366 个字符，预计需要花费 4 分钟才能阅读完成。

《Vite 与 Vue3 中的 Custom Environment Variables》

在 Vue 3 中，我们经常需要处理大量的配置参数。其中一些可能来自生产环境的配置文件（如 .env.production），而其他可能来自开发环境的配置文件（如 .env.development）。然而，在 Vite Vue 项目中，如果我们尝试从开发环境中读取一个自定义变量，可能会出现 Uncaught SyntaxError：“Syntax error, unrecognized expression: VITE_APP_ENV”的错误。这说明 Vue 无法识别我们自定义的开发环境变量。

解决这个问题的方法是创建一个新的 .env.development 文件，用于保存我们的自定义变量。然后，我们可以将其写入到配置文件中，并将该文件与项目的公共主 .env 文件一起使用。

此外，还有一个更高级的方法可以避免在 Vue 项目中引入生产环境中的变量。这可以通过 Vite 的自定义加载器来实现。Vite 自定义加载器允许我们提供额外的选项，例如加载环境变量或处理特定的配置。下面是一个使用 Vite 自定义加载器创建 .env.development 文件的例子。

首先，我们需要在项目中添加一个名为 “dev” 的插件：

bash
npm install -D vite-dev

然后，在 package.json 中更新 viteDevServer 配置项（例如指定环境变量）：

json
{
"scripts": {
"serve:development": "vite --config vite.config.development.js --env development",
"serve:production": "vite --config vite.config.production.js --env production"
},
"dependencies": {}
}

接下来，我们需要创建一个名为 “.env.development” 的文件，并在其中添加以下内容：

“`bash

VITE_APP_ENV=development

VITE_APP_PORT=8081 # 配置一个开发环境的端口

使用 Vite Dev Server 连接

SERVER_URL=http://localhost:8081 # 配置一个开发环境的 URL
“`

最后，我们需要更新 vite.config.development.js 文件：

json
{
"plugins": [
// 添加自定义插件配置
{
"name": "dev",
"options": {
"port": "VITE_APP_PORT", # 配置自定义开发环境的端口
"serverUrl": SERVER_URL, # 配置自定义开发环境的 URL
},
}
],
}

现在，我们可以运行 vite 命令，它将加载 .env.development 文件，并使用开发环境变量。

然而，需要注意的是，Vite Dev Server 使用的是 HTTP(s) 协议而不是 TCP/IP 协议。因此，我们可能需要修改我们的防火墙规则或网络配置来允许 DevServer 连接到服务器。

总的来说，通过创建和正确管理 .env.development 文件，我们可以轻松地在开发环境中使用生产环境的变量，而无需在代码中直接引用它们。这大大简化了 Vue 项目中的配置管理工作，并提高了项目的灵活性和可扩展性。