Vben Admin配置环境变量

配置环境变量

(1).env通用环境变量

# 端口号
VITE_PORT=3100
# 网站标题
VITE_GLOB_APP_TITLE=vben admin
# 简称,用于配置文件名字 不要出现空格、数字开头等特殊字符
VITE_GLOB_APP_SHORT_NAME=vben_admin

(2).env.development开发环境变量

# 是否开启mock数据,关闭时需要自行对接后台接口
VITE_USE_MOCK = false

# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH = /

# 本地开发代理,可以解决跨域及多地址代理
# 如果接口地址匹配到,则会转发到http://localhost:3000,防止本地出现跨域问题
# 可以有多个,注意多个不能换行,否则代理将会失效
VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]

# 是否删除Console.log
VITE_DROP_CONSOLE = false

# 接口地址
# 如果没有跨域问题,直接在这里配置即可
VITE_GLOB_API_URL= /basic-api

# 文件上传接口  可选
VITE_GLOB_UPLOAD_URL=/upload

# 接口地址前缀,有些系统所有接口地址都有前缀,可以在这里统一加,方便切换
VITE_GLOB_API_URL_PREFIX=

(3).env.production 生产环境变量

# 是否开启mock
VITE_USE_MOCK=true
# 接口地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_API_URL=/api
# 文件上传地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_UPLOAD_URL=/upload
# 接口地址前缀,有些系统所有接口地址都有前缀,可以在这里统一加,方便切换
VITE_GLOB_API_URL_PREFIX=
# 是否删除Console.log
VITE_DROP_CONSOLE=true
# 资源公共路径,需要以 / 开头和结尾
VITE_PUBLIC_PATH=/
# 打包是否输出gz|br文件
# 可选: gzip | brotli | none
# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
VITE_BUILD_COMPRESS = 'gzip'
# 打包是否压缩图片
VITE_USE_IMAGEMIN = false
# 打包是否开启pwa功能
VITE_USE_PWA = false
# 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本
VITE_LEGACY = false
### 关于 Vben Admin V5 的官方文档和教程 Vben Admin 是一款基于 Vue 3 和 TypeScript 构建的现代化管理后台框架,其最新版本 V5 提供了许多强大的功能以及灵活的扩展能力。以下是关于 Vben Admin V5 官方文档及相关资源的信息: #### 官方文档 Vben Admin 的官方文档提供了详细的安装指南、配置说明以及组件使用方法等内容。可以通过访问以下链接获取完整的官方文档: - **官方文档地址**: [https://vben.admin](https://vben.admin)[^1] 该文档涵盖了从项目初始化到高级功能实现的所有内容,适合不同层次的开发者学习。 #### 教程与资源 对于新手来说,除了官方文档外,还可以通过一些社区分享的学习资料快速上手 Vben Admin V5。以下是几类常见的教程和资源推荐: 1. **基础入门** - 基础篇介绍了 Vben Admin 的基本概念及其初始运行环境搭建的方法[^1]。 - 如何克隆仓库并启动开发服务器。 - 配置依赖项及解决常见问题。 2. **核心功能解析** - 登录逻辑梳理:描述了如何对接后端 login 接口完成用户认证过程。 - 用户信息加载:讲解了 getUserInfo 接口的作用及其实现细节[^1]。 3. **权限管理系统** - 权限控制分为两种方式——前端控制和后端控制[^1]。 - 前端控制涉及路由守卫机制的应用。 - 后端控制则需配合动态路由生成技术来实现个性化菜单展示。 4. **主题定制化** - 主题修改方面,Vben Admin 支持自定义颜色方案,包括但不限于渐变色设置[^2]。 - 修改默认主题至渐变样式的具体操作位于 `packages/effects/hooks/src/use-design-tokens.ts` 文件中。 - 如果希望调整暗黑模式下的视觉效果,则需要关注 `dark模式配置` 相关部分[^2]。 5. **第三方库集成** - 对于像 Element Plus 这样的 UI 库,在 Vben Admin 中可通过插件形式自动引入所需组件[^3]。 - 使用 `unplugin-vue-components` 实现按需加载的同时避免全局污染。 - 解决 CSS 变量冲突问题时可尝试增强样式的优先级设定策略。 以上内容均来源于实际案例分析或官方指导手册,能够帮助使用者全面了解并掌握 Vben Admin V5 的各项特性。 ```javascript // 示例代码片段:简单演示如何调用登录接口 import { useUserStore } from '/@/store/modules/user'; const userStore = useUserStore(); await userStore.login({ username: 'admin', password: 'password' }); console.log('Login successful'); ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值