Vben Admin后台管理系统的开箱使用（适合小白）

一、本地运行文档，拉取代码到本地

# 拉取代码
git clone https://github.com/vbenjs/vue-vben-admin-doc

# 安装依赖
yarn

# 运行项目
yarn dev

注：vben使用的node版本为14.15.1

二、配置环境变量

（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 = [["/api","http://192.168.2.8:5005/api"],["/UploadFiles","http:/192.168.2.8:5005/UploadFiles"]]

# 是否删除Console.log
VITE_DROP_CONSOLE = false

# 接口地址
# 如果没有跨域问题，直接在这里配置即可
VITE_GLOB_API_URL= 'http://192.168.2.8:5005/api'

# 文件上传接口  可选
VITE_GLOB_UPLOAD_URL="http://192.168.2.8:5005/UploadFiles"

# Interface prefix
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

三、配置好后yarn dev发现出现这个问题，若点击登录后接口抛出 net::ERR_SSL_PROTOCOL_ERROR 错误，那么请检查你的 .env.development 文件中的代理地址是不是使用了https，修改为http即可

 解决：在store文件下的modules文件下的user.ts文件中打断点调试（如下图），根据接口返回的data中的字段来进行修改即可