vue3 ts 配置smartadmin相关配置

李白的天不白2026-06-15 15:27

在 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 完美符合这一规范，因此可以在前端代码中安全地读取。