109 lines
31 KiB
JavaScript
109 lines
31 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 e(t,s,h,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[l(`<h1 id="_2-4-前端服务启动" tabindex="-1">2.4 前端服务启动 <a class="header-anchor" href="#_2-4-前端服务启动" aria-label="Permalink to "2.4 前端服务启动""></a></h1><div class="tip custom-block"><p class="custom-block-title">概述</p><p>本章指导您启动前端开发服务器，包括依赖安装、环境配置和 Vite 开发服务器启动。前端为本仓库 <code>ui/</code> 目录内的 EleVue 管理后台（Vue3 + ElementPlus）。</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;"># 进入前端项目目录（克隆/解压前端仓库至 ui/ 目录）</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 >= 22（推荐 22.18.0）。可通过 <code>node -v</code> 检查版本，安装方式见 <a href="/zh/quickstart/environment.html">2.1 开发环境准备</a>。</p></div><div class="tip custom-block"><p class="custom-block-title">国内镜像</p><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:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> config</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> set</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> registry</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> https://registry.npmmirror.com</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;">npm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> config</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> set</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> registry</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> https://registry.npmmirror.com</span></span></code></pre></div></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><p>摘自前端项目 <code>ui/.env.development</code>：</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:#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;"># 是否开启mock</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>
|
||
<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;"># 跨域代理，可以配置多个，请注意不要换行</span></span>
|
||
<span class="line"><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_PROXY</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">[[</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:#E7EE98;--shiki-light:#B56959;">,</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.laravel13.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;"># 图片上传地址</span></span>
|
||
<span class="line"><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_UPLOAD_URL</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</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:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_IMG_URL</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 是否启用gzip压缩或brotli压缩</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 可选: gzip | brotli | none</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;">VITE_BUILD_COMPRESS</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">none</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 使用压缩时是否删除原始文件，默认为false</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>
|
||
<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_API_URL_PREFIX</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> /api</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">代理目标</p><p><code>VITE_PROXY</code> 默认指向 Laragon 虚拟主机 <code>http://admin.laravel13.elevue/api</code>（见 <a href="/zh/quickstart/laragon.html">2.2 Laragon 环境搭建</a>）；直连 <code>php artisan serve</code> 时改为 <code>[["/api","http://admin.laravel13.elevue/api"]]</code>。修改后需重启 <code>pnpm dev</code> 生效。</p></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><p>摘自前端项目 <code>ui/.env.production</code>：</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;"># 是否开启mock</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>
|
||
<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;"># 是否删除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</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;"># 图片上传地址</span></span>
|
||
<span class="line"><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_UPLOAD_URL</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</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:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_IMG_URL</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</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_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;"># 是否启用gzip压缩或brotli压缩</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 可选: gzip | brotli | none</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;">VITE_BUILD_COMPRESS</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">none</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 使用压缩时是否删除原始文件，默认为false</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> 请求转发到后端服务，代理规则由 <code>.env.development</code> 的 <code>VITE_PROXY</code> 驱动（并非写死在 <code>vite.config.ts</code> 中）。</p><p><code>vite.config.ts</code> 读取 <code>VITE_PROXY</code> 并调用 <code>createProxy</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;"> host</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#1E754F;"> true</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:#F6F6F4;--shiki-light:#B07D48;"> VITE_PORT</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:#62E884;--shiki-light:#59873A;"> createProxy</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">VITE_PROXY</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">),</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 由 .env.development 的 VITE_PROXY 生成</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span></code></pre></div><p><code>createProxy</code>（<code>build/vite/proxy.ts</code>）为每个 <code>[前缀, 目标地址]</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:#B07D48;">ret</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">[</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">prefix</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:#999999;"> {</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> target</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 目标地址（自带 /api，如 http://admin.laravel13.elevue/api）</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:#F6F6F4;--shiki-light:#998418;"> ws</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;">// 支持 WebSocket</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:#62E884;--shiki-light:#59873A;">replace</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#F286C4;--shiki-dark-font-weight:bold;--shiki-light:#AB5959;--shiki-light-font-weight:inherit;">new</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> RegExp</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B5695977;">\`</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">^</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">\${</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B56959;">prefix</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">}</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B5695977;">\`</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">), </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;">// 去掉 /api 前缀，由 target 中的 /api 补回</span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">};</span></span></code></pre></div><p>更换后端地址时修改 <code>.env.development</code> 中的 <code>VITE_PROXY</code> 即可（直连 <code>php artisan serve</code> 时改为 <code>http://admin.laravel13.elevue/api</code>，见 <a href="/zh/quickstart/laragon.html">2.2 Laragon 环境搭建</a>），改后重启 <code>pnpm dev</code> 生效。</p><p>确保后端服务已启动（Laragon 或 <code>php artisan serve</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 代理（rewrite 去掉 <code>/api</code>、target 补回）→ <code>http://admin.laravel13.elevue/api/login</code> → 后端处理</p><p>代理方式下前端无需关心跨域；若改为直连后端（<code>VITE_GLOB_API_URL</code> 配置完整地址），则依赖后端 CORS 配置（<code>.env</code> 中 <code>CORS_ALLOW_ORIGIN</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> 目录包含可部署的静态文件，部署方式见 <a href="/zh/deploy/frontend.html">11.5 前端部署</a>。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>后端仓库根目录的 <code>composer dev</code> / <code>composer setup</code> 也会执行 <code>npm run build</code>（构建后端 <code>resources/</code> 下的静态资源），与前端仓库的构建相互独立。</p></div><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:#62E884;--shiki-light:#59873A;">curl</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> http://admin.laravel13.elevue/api/captcha</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># → {"code":0,...} 即后端正常</span></span></code></pre></div><p>再检查 <code>.env.development</code> 中 <code>VITE_PROXY</code> 的目标地址是否指向后端实际地址（改完需重启 <code>pnpm dev</code>）。</p><h3 id="_4-登录报-401" tabindex="-1">4. 登录报 401 <a class="header-anchor" href="#_4-登录报-401" aria-label="Permalink to "4. 登录报 401""></a></h3><ol><li>Token 过期 → 重新登录（access_token 默认 2 小时）</li><li>请求头格式错误 → 确保是 <code>Authorization: Bearer <token></code></li><li>后端 <code>JWT_SECRET</code> 变更 → 旧令牌全部失效，重新登录即可</li></ol>`,46)])])}const E=i(p,[["render",e]]);export{o as __pageData,E as default};
|