rxthinkcmf/rxthinkcmf-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4084c6bd17e541ac204896886f15246c1837ddd6
rxthinkcmf-wiki/RXThinkCMF_Laravel13_NaiveVue/.vitepress/dist/assets/zh_quickstart_frontend-start.md.CmeeXuh1.lean.js
T
gitadmin 4084c6bd17 签入版本
2026-10-11 19:06:33 +08:00

95 lines
27 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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 &quot;2.4 前端服务启动&quot;">​</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 &quot;步骤一：安装依赖&quot;">​</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 &gt;= 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 &quot;步骤二：配置环境变量&quot;">​</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 &quot;\`.env.development\`（开发环境）&quot;">​</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 数组格式：[[&quot;前缀&quot;,&quot;目标地址&quot;]]）</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;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">,</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.laravel13.naivevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</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 &quot;\`.env.production\`（生产环境）&quot;">​</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 &quot;步骤三：启动开发服务器&quot;">​</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 &quot;步骤四：配置 API 代理&quot;">​</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;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</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;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.laravel13.naivevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</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;">=&gt;</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;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.laravel13.naivevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</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 &quot;步骤五：验证前后端联调&quot;">​</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 &quot;构建生产版本&quot;">​</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 &quot;常见问题&quot;">​</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 &quot;1. \`pnpm install\` 报错&quot;">​</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 &quot;2. 端口 8001 被占用&quot;">​</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 &quot;3. API 请求 404&quot;">​</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;"># → {&quot;code&quot;: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 &quot;4. 登录报 401&quot;">​</a></h3><ol><li>Token 过期 → 重新登录（access_token 默认 2 小时）</li><li>请求头格式错误 → 确保是 <code>Authorization: Bearer &lt;token&gt;</code></li><li>后端 <code>JWT_SECRET</code> 变更 → 旧令牌全部失效，重新登录即可</li></ol>`,42)])])}const E=i(p,[["render",t]]);export{o as __pageData,E as default};
Reference in New Issue View Git Blame Copy Permalink