玩转Vben Admin第1改：API接口网络配置

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 中的script把src的值改成外网配置链接

7-2：修改上面的标题（如果在第3步忘记修改/.env文件，可以在这里补救）

<title>Vben Admin</title>

7-3：还有页面中显示的标题（再次确认项目名字没有错）

?

1	<div class="app-loading-title">Vben Admin</div>

8：完成，下面开始实现登录界面的功能加载，
玩转Vben Admin第2改：配置权限模式 （支线任务）
玩转Vben Admin第3改：登录页面配置 （主线任务）