企业官网建设流程全解析

在 Vue3 + TypeScript 版本的 SmartAdmin 前端项目中，这段环境变量代码不是配置在.vue或.ts业务代码文件里的，而是需要配置在项目根目录下的.env环境变量文件中。

以下是具体的配置步骤：

1. 创建或修改环境配置文件

在 SmartAdmin 前端项目的根目录（与package.json同级的位置），找到或新建以下文件之一：

• 开发环境：.env.development（推荐，仅在npm run dev时生效）
• 生产环境：.env.production（在npm run build打包时生效）

2. 写入配置代码

打开你选择的.env文件，将以下代码写入其中并保存：

VITE_APP_API_BASE_URL=http://localhost:8080

3. 在 Vue/TS 代码中如何使用？

配置好上述文件后，Vite 会在构建时自动注入这些变量。你在 Vue 组件或 TypeScript 文件中，可以通过import.meta.env对象来读取这个地址。

例如，在封装 Axios 请求或配置路由时：

// 在 .ts 或 .vue 文件中获取配置的 API 地址 const apiUrl = import.meta.env.VITE_APP_API_BASE_URL; console.log('当前配置的API地址:', apiUrl); // 控制台将输出: 当前配置的API地址: http://localhost:8080

💡 核心提示：
Vite 规定，所有暴露给前端客户端代码的环境变量，必须以VITE_为前缀。你提供的VITE_APP_API_BASE_URL完美符合这一规范，因此可以在前端代码中安全地读取。