前端启动

lamp-web 简介

本项目的5.x分支是基于vue-vben-admin进行二次开发的系统。该项目是基于Vue3.x、Vite、 Ant-Design-Vue3.x 、TypeScript 的中后台解决方案，目标是为中大型项目开发,提供现成的开箱解决方案及丰富的示例。

详情的使用文档请参考他们的官方文档：

• vben：https://doc.vvbin.cn/
• ant-design-vue： https://www.antdv.com/

环境要求

• Node.js: 版本大于 20.2.0
• pnpm : 包管理工具.

工具配置

如果您使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

• Iconify IntelliSense- Iconify 图标插件
• windicss IntelliSense- windicss 提示插件
• I18n-ally- i18n 插件
• Vetur- vue 开发必备 （也可以选择 Volar）
• ESLint- 脚本代码检查
• Prettier- 代码格式化
• Stylelint- css 格式化
• DotENV- .env 文件 高亮

下载源码

注意

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

#  使git对文件名大小写敏感
git config core.ignorecase false

# 拉取项目代码
git clone https://gitee.com/zuihou111/lamp-web.git

cd lamp-web

# 切换分支
git checkout 5.x

# 安装依赖
pnpm install --registry=https://registry.npmmirror.com

修改配置

1. 根据自己的需求修改 .env 文件，VITE_GLOB_MULTI_TENANT_TYPE 参数改成跟后端对应的模式

   # 端口号
   VITE_PORT = 3100
   
   # 标题 logo title
   VITE_GLOB_APP_TITLE = lamp-web-pro
   
   # 简称，用于配置文件名字 不要出现空格等特殊字符
   VITE_GLOB_APP_SHORT_NAME = lamp_web_pro
   
   # 后台动态获取菜单
   VITE_DYNAMIC_IMPORT = true
   
   # 多租户类型  可选值： DATASOURCE_COLUMN DATASOURCE COLUMN NONE
   VITE_GLOB_MULTI_TENANT_TYPE = NONE
   
   # 登录页是否显示验证码
   VITE_GLOB_SHOW_CAPTCHA = true
   
   # 客户端id&秘钥 VITE_GLOB_CLIENT_ID 和 VITE_GLOB_CLIENT_SECRET 务必和 def_client 表中的信息保持一致
   VITE_GLOB_CLIENT_ID = lamp_web_pro
   VITE_GLOB_CLIENT_SECRET = lamp_web_pro_secret
   
   # 网站header栏红色提示文字
   VITE_GLOB_TIPS = lamp-cloud-pro 4.0赞助版震撼发布，欢迎体验~(请勿删除数据！)
   
   # 默认登录时加载的默认应用ID，此ID需要事先在def_application中配置
   VITE_GLOB_DEF_APPLICATION_ID = 1
   
   # 第三方文件预览服务 需要自行安装kkFileView（https://gitee.com/kekingcn/file-online-preview）
   VITE_GLOB_PREVIEW_URL_PREFIX="http://106.53.26.9:8012/onlinePreview?url="
   
   # 请求头中携带的token(用户身份信息) key名称
   VITE_GLOB_TOKEN_KEY=Token
   
   # 请求头中携带的租户ID key名称  （开源版没用）
   VITE_GLOB_TENANT_ID_KEY=TenantId
   
   # 请求头中携带的应用ID key名称
   VITE_GLOB_APPLICATION_ID_KEY=ApplicationId
   
   # 请求头中携带的客户端信息 key名称
   VITE_GLOB_AUTHORIZATION_KEY=Authorization
   
   # axios 请求默认超时间： 10s
   VITE_GLOB_AXIOS_TIMEOUT=10000
   

2. 修改 .env.development 文件中：VITE_PROXY。该配置只区分后端是lamp-boot还是lamp-cloud，不区分租户模式。

   • 下方配置地址：http://localhost:18760 是后台服务 lamp-gateway-server 的地址

   • 可以将 http://localhost:18760 改成 https://datasource.tangyh.top 蹭lamp提供的后台服务

   VITE_PROXY=[["/api","http://localhost:18760"],["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
   

   • 下方配置地址：http://localhost:18760 是后台服务 lamp-boot-server 的地址

   • 可以将 http://localhost:18760 改成 https://datasource.tangyh.top 蹭lamp提供的后台服务

      VITE_PROXY=[[["/api/gateway", "/api/gateway", "/gateway"],"http://localhost:18760"], [["/api", "/api/[A-Za-z0-9]+", ""],"http://localhost:18760"],["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
   

3. 启动

   pnpm dev
   

4. 打包

   pnpm build
   

常见问题

1. 安装依赖时 husky 安装失败

   答： 请查看你的源码是否从 github 直接下载的，直接下载是没有.git文件夹的，而husky需要依赖git才能安装。此时需使用git init初始化项目，再尝试重新安装即可。

常用命令

打包

pnpm build:no-cache # 打包，执行之前会先删除缓存
pnpm report # 生成构建包报表预览

格式化

pnpm lint:stylelint # 样式格式化
pnpm lint:prettier # js/ts代码格式化

其他

pnpm reinstall # 删除依赖重新装，兼容window
pnpm preview # 本地进行打包预览
pnpm log # 生成CHANGELOG
pnpm clean:cache # 删除缓存
pnpm clean:lib # 删除node_modules，兼容window系统