95 lines
27 KiB
JavaScript
95 lines
27 KiB
JavaScript
import{_ as i,o as a,c as n,a2 as l}from"./chunks/framework.BbmSSMjL.js";const o=JSON.parse('{"title":"2.4 前端服务启动","description":"","frontmatter":{},"headers":[],"relativePath":"zh/quickstart/frontend-start.md","filePath":"zh/quickstart/frontend-start.md"}'),p={name:"zh/quickstart/frontend-start.md"};function t(e,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> 目录内的 NaiveVue 管理后台（Vue3 + NaiveUI）。</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><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.laravel13.naivevue/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;"># 图片访问地址（附件域名，对应后端 FILE_DOMAIN_URL）</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.laravel13.naivevue</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;"> https://file.example.com</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.laravel13.naivevue/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>后端使用虚拟域名时（见 <a href="/zh/quickstart/laragon.html">2.2 Laragon 环境搭建</a>），target 改为对应地址：</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;">target</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.laravel13.naivevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span></span></code></pre></div><p>确保后端服务已启动（<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 代理 → <code>http://admin.laravel13.naivevue/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.naivevue/api/captcha</span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># → {"code":0,...} 即后端正常</span></span></code></pre></div><p>再检查 <code>vite.config.ts</code> 中 <code>proxy.target</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>`,42)])])}const E=i(p,[["render",t]]);export{o as __pageData,E as default};
|