1:首先下载代码并安装配置
git clone https://github.com/vbenjs/vue-vben-admin.git
cd vue-vben-admin
npm i -g pnpm
pnpm i
2:编辑 /vite.config.ts 的第56行,找到https改成false(为了方便调试,而无需配置https证书)
3:编辑 /.env 文件配置项目标题
4:打开 /.env.development 修改VITE_USE_MOCK、取消VITE_PROXY、修改VITE_GLOB_API_URL(参考下面的代码)
# Whether to open mock
VITE_USE_MOCK = false
# public path
VITE_PUBLIC_PATH = /
# Cross-domain proxy, you can configure multiple
# Please note that no line breaks
#VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
# Delete console
VITE_DROP_CONSOLE = false
# Basic interface address SPA
VITE_GLOB_API_URL=http://127.0.0.1:9000/basic-api
# File upload address, optional
VITE_GLOB_UPLOAD_URL=/upload
# Interface prefix
VITE_GLOB_API_URL_PREFIX=
5:同时修改 /.env.production 修改VITE_USE_MOCK为false(关闭内部模拟的服务器,直接用外网真实的服务器),然后编译静态的文件出来
6:编译出来后找到 /dist/_app.config.js
window.__PRODUCTION__VUE_VBEN_ADMIN__CONF__ = {
"VITE_GLOB_APP_TITLE": "飞儿云平台",
"VITE_GLOB_APP_SHORT_NAME": "飞儿云",
"VITE_GLOB_API_URL": "http://127.0.0.1:9000/basic-api",
"VITE_GLOB_UPLOAD_URL": "http://127.0.0.1:9000/upload",
"VITE_GLOB_API_URL_PREFIX": ""
};
Object.freeze(window.__PRODUCTION__VUE_VBEN_ADMIN__CONF__);
Object.defineProperty(window, "__PRODUCTION__VUE_VBEN_ADMIN__CONF__", {
configurable: false,
writable: false,
});
7-1:找到 /dist/index.html
7-2:修改上面的标题(如果在第3步忘记修改/.env文件,可以在这里补救)
<title>Vben Admin</title>
7-3:还有页面中显示的标题(再次确认项目名字没有错)
<div class="app-loading-title">Vben Admin</div>
8:完成,下面开始实现登录界面的功能加载,
玩转Vben Admin第2改:配置权限模式 (支线任务)
玩转Vben Admin第3改:登录页面配置 (主线任务)