95 lines
25 KiB
JavaScript
95 lines
25 KiB
JavaScript
import{_ as i,o as a,c as n,a2 as l}from"./chunks/framework.B-QBKwc1.js";const o=JSON.parse('{"title":"前端服务启动","description":"本章指导您启动前端开发服务器，包括依赖安装、环境配置和 Vite 开发服务器启动。","frontmatter":{},"headers":[],"relativePath":"zh/quickstart/frontend-start.md","filePath":"zh/quickstart/frontend-start.md"}'),p={name:"zh/quickstart/frontend-start.md"};function t(h,s,e,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[l(`<h1 id="_2-3-前端服务启动" tabindex="-1">2.3 前端服务启动 <a class="header-anchor" href="#_2-3-前端服务启动" aria-label="Permalink to "2.3 前端服务启动""></a></h1><div class="tip custom-block"><p class="custom-block-title">概述</p><p>本章指导您启动前端开发服务器，包括依赖安装、环境配置和 Vite 开发服务器启动。</p></div><h2 id="步骤一-安装依赖" tabindex="-1">步骤一：安装依赖 <a class="header-anchor" href="#步骤一-安装依赖" aria-label="Permalink to "步骤一：安装依赖""></a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 进入前端项目目录</span></span>
|
||
<span class="line"><span style="--shiki-dark:#97E1F1;--shiki-light:#998418;">cd</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> ui</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 安装依赖（推荐 pnpm — 速度快、磁盘占用少）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># install → 从 pnpm-lock.yaml 精确安装所有依赖</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> install</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 如果没有 pnpm，也可以使用 npm</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">npm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> install</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">Node.js 版本</p><p>前端项目要求 Node.js >= 18，推荐使用 22.x。可通过 <code>node -v</code> 检查版本。</p></div><h2 id="步骤二-配置环境变量" tabindex="-1">步骤二：配置环境变量 <a class="header-anchor" href="#步骤二-配置环境变量" aria-label="Permalink to "步骤二：配置环境变量""></a></h2><p>前端有两个环境配置文件：</p><h3 id="-env-development-开发环境-" tabindex="-1"><code>.env.development</code>（开发环境） <a class="header-anchor" href="#-env-development-开发环境-" aria-label="Permalink to "\`.env.development\`（开发环境）""></a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 服务端口</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_PORT</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;"> 8001</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 公共基础路径</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_PUBLIC_PATH</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> /</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 代理配置（JSON 数组格式：[["前缀","目标地址"]]）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_PROXY</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;"> [[</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">,</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.thinkphp6.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">]]</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># API 接口基础路径（留空，由代理处理）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_API_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># API 前缀</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_API_URL_PREFIX</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> /api</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 上传接口地址</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_UPLOAD_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> /api/upload</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 图片访问地址</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_IMG_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> http://file.thinkphp6.elevue</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 是否启用 Mock 数据（false = 使用真实后端 API）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_USE_MOCK</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#1E754F;"> false</span></span></code></pre></div><h3 id="-env-production-生产环境-" tabindex="-1"><code>.env.production</code>（生产环境） <a class="header-anchor" href="#-env-production-生产环境-" aria-label="Permalink to "\`.env.production\`（生产环境）""></a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 公共基础路径</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_PUBLIC_PATH</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> /</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 是否在生产环境删除 console</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_DROP_CONSOLE</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#1E754F;"> true</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># API 接口基础路径（留空，由 Nginx 代理处理）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_API_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># API 前缀</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_API_URL_PREFIX</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> /api</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 上传接口地址</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_UPLOAD_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> /api/upload</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 图片访问地址</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_GLOB_IMG_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> http://file.thinkphp6.elevue</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 是否启用 gzip 压缩</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_BUILD_COMPRESS</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> gzip</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 压缩后是否删除原文件</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#1E754F;"> false</span></span></code></pre></div><h2 id="步骤三-启动开发服务器" tabindex="-1">步骤三：启动开发服务器 <a class="header-anchor" href="#步骤三-启动开发服务器" aria-label="Permalink to "步骤三：启动开发服务器""></a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 启动 Vite 开发服务器（支持热更新 — 修改代码后浏览器自动刷新）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> dev</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 或使用 npm</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">npm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> run</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> dev</span></span></code></pre></div><p>启动成功后会看到：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span> VITE v3.2.x ready in 1234 ms</span></span>
|
||
<span class="line"><span></span></span>
|
||
<span class="line"><span> ➜ Local: http://localhost:8001/</span></span>
|
||
<span class="line"><span> ➜ Network: http://192.168.1.100:8001/</span></span></code></pre></div><h2 id="步骤四-配置-API-代理" tabindex="-1">步骤四：配置 API 代理 <a class="header-anchor" href="#步骤四-配置-API-代理" aria-label="Permalink to "步骤四：配置 API 代理""></a></h2><p>开发环境下，前端通过 Vite 代理将 <code>/api</code> 请求转发到后端服务。</p><p>在 <code>vite.config.ts</code> 中配置代理：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// ui/vite.config.ts</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;">server</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;"> port</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;"> 8001</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 开发服务器端口（对应 VITE_PORT）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;"> proxy</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
|
||
<span class="line"><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> target</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.thinkphp6.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 后端服务地址（对应 VITE_PROXY）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> changeOrigin</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#1E754F;"> true</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 开启跨域（修改请求头的 Origin）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> rewrite</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> (</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">path</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">) </span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=></span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> path</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 保持路径不变（不做路径替换）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span></code></pre></div><p>确保后端服务已启动（<code>php think run</code>），然后访问 <code>http://localhost:8001</code>。</p><h2 id="步骤五-验证前后端联调" tabindex="-1">步骤五：验证前后端联调 <a class="header-anchor" href="#步骤五-验证前后端联调" aria-label="Permalink to "步骤五：验证前后端联调""></a></h2><ol><li>打开浏览器访问 <code>http://localhost:8001</code></li><li>应该看到登录页面</li><li>输入默认账号 <code>admin</code> / <code>123456</code></li><li>登录成功后进入控制台页面</li></ol><div class="tip custom-block"><p class="custom-block-title">代理原理</p><p>浏览器 → <code>http://localhost:8001/api/login</code> → Vite 代理 → <code>http://admin.thinkphp6.elevue/api/login</code> → 后端处理</p></div><h2 id="构建生产版本" tabindex="-1">构建生产版本 <a class="header-anchor" href="#构建生产版本" aria-label="Permalink to "构建生产版本""></a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 构建生产版本（Vite 会压缩代码、Tree-shaking、分包）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># build → 输出到 ui/dist/ 目录</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> build</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 预览构建结果（本地启动一个静态文件服务器预览 dist/ 内容）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> preview</span></span></code></pre></div><p>构建完成后，<code>ui/dist/</code> 目录包含可部署的静态文件。</p><h2 id="常见问题" tabindex="-1">常见问题 <a class="header-anchor" href="#常见问题" aria-label="Permalink to "常见问题""></a></h2><h3 id="_1-pnpm-install-报错" tabindex="-1">1. <code>pnpm install</code> 报错 <a class="header-anchor" href="#_1-pnpm-install-报错" aria-label="Permalink to "1. \`pnpm install\` 报错""></a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 清除缓存重新安装（修复依赖冲突或缓存损坏）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -----------------------------------------------------------------------------</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># rm -rf → 递归强制删除（node_modules 和 lockfile）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">rm</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#A65E2B;"> -rf</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> node_modules</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> pnpm-lock.yaml</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> install</span></span></code></pre></div><h3 id="_2-端口-8001-被占用" tabindex="-1">2. 端口 8001 被占用 <a class="header-anchor" href="#_2-端口-8001-被占用" aria-label="Permalink to "2. 端口 8001 被占用""></a></h3><p>修改 <code>.env.development</code> 中的 <code>VITE_PORT</code> 或 <code>vite.config.ts</code> 中的 <code>server.port</code>：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;">server</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;"> port</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;"> 8002</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 改为其他端口（如 8002、8003 等）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span></code></pre></div><h3 id="_3-API-请求-404" tabindex="-1">3. API 请求 404 <a class="header-anchor" href="#_3-API-请求-404" aria-label="Permalink to "3. API 请求 404""></a></h3><p>检查后端服务是否启动，以及代理配置是否正确：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 确认后端在运行（直接请求后端登录接口）</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -X POST → POST 方法</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -H → 设置 Content-Type 为 JSON</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># -d → 发送 JSON 请求体</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">curl</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> http://admin.thinkphp6.elevue/api/login</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#A65E2B;"> -X</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> POST</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#A65E2B;"> -H</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> "</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">Content-Type: application/json</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#A65E2B;"> -d</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">{"username":"admin","password":"123456"}</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span></span></code></pre></div>`,35)])])}const E=i(p,[["render",t]]);export{o as __pageData,E as default};
|