rxthinkcmf/rxthinkcmf-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d0bb340dbc95661af174c2d1fb59fd9dfc752224
rxthinkcmf-wiki/RXThinkCMF_ThinkPhp8_EleVue/.vitepress/dist/assets/zh_frontend_env-config.md.B-VkgtJk.lean.js
T
gitadmin d0bb340dbc 签入版本
2026-10-25 18:52:36 +08:00

172 lines
57 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 t}from"./chunks/framework.B-QBKwc1.js";const g=JSON.parse('{"title":"环境与构建配置","description":"本节说明前端项目的环境变量配置和 Vite 构建配置，包括开发环境和生产环境的差异配置。","frontmatter":{},"headers":[],"relativePath":"zh/frontend/env-config.md","filePath":"zh/frontend/env-config.md"}'),h={name:"zh/frontend/env-config.md"};function p(l,s,e,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="_9-3-环境与构建配置" tabindex="-1">9.3 环境与构建配置 <a class="header-anchor" href="#_9-3-环境与构建配置" aria-label="Permalink to &quot;9.3 环境与构建配置&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">概述</p><p>本节说明前端项目的环境变量配置和 Vite 构建配置，包括开发环境和生产环境的差异配置。前端通过 <code>.env</code> 文件管理环境变量，Vite 自动根据模式加载对应的 <code>.env</code> 文件。</p></div><h2 id="环境变量文件" tabindex="-1">环境变量文件 <a class="header-anchor" href="#环境变量文件" aria-label="Permalink to &quot;环境变量文件&quot;">​</a></h2><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>ui/</span></span>
<span class="line"><span>├── .env # 所有环境通用配置</span></span>
<span class="line"><span>├── .env.development # 开发环境配置</span></span>
<span class="line"><span>├── .env.production # 生产环境配置</span></span>
<span class="line"><span>└── .env.local # 本地覆盖（不提交 git）</span></span></code></pre></div><p><strong>加载优先级：</strong> <code>.env.local</code> &gt; <code>.env.{mode}</code> &gt; <code>.env</code></p><h2 id="开发环境配置" tabindex="-1">开发环境配置 <a class="header-anchor" href="#开发环境配置" aria-label="Permalink to &quot;开发环境配置&quot;">​</a></h2><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;"># 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;"># 代理配置（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.thinkphp8.elevue/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;"># 上传接口地址</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.thinkphp8.elevue</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;"> false</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><h2 id="生产环境配置" tabindex="-1">生产环境配置 <a class="header-anchor" href="#生产环境配置" aria-label="Permalink to &quot;生产环境配置&quot;">​</a></h2><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;"># 公共基础路径（通常为 /，如部署到子目录则设为 /subdir/）</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;"># 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://cdn.example.com</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;"># 是否启用 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><h3 id="VITE-PORT-—-开发服务器端口" tabindex="-1">VITE_PORT — 开发服务器端口 <a class="header-anchor" href="#VITE-PORT-—-开发服务器端口" aria-label="Permalink to &quot;VITE_PORT — 开发服务器端口&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:#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></code></pre></div><table tabindex="0"><thead><tr><th>环境</th><th>值</th><th>说明</th></tr></thead><tbody><tr><td>开发</td><td><code>8001</code></td><td>前端开发服务器端口</td></tr><tr><td>生产</td><td>不生效</td><td>生产环境由 Nginx 提供服务</td></tr></tbody></table><h3 id="VITE-PUBLIC-PATH-—-公共基础路径" tabindex="-1">VITE_PUBLIC_PATH — 公共基础路径 <a class="header-anchor" href="#VITE-PUBLIC-PATH-—-公共基础路径" aria-label="Permalink to &quot;VITE_PUBLIC_PATH — 公共基础路径&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:#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></code></pre></div><table tabindex="0"><thead><tr><th>场景</th><th>值</th><th>说明</th></tr></thead><tbody><tr><td>根目录部署</td><td><code>/</code></td><td>默认值</td></tr><tr><td>子目录部署</td><td><code>/admin/</code></td><td>如 <code>https://example.com/admin/</code></td></tr></tbody></table><h3 id="VITE-GLOB-API-URL-—-API-基础路径" tabindex="-1">VITE_GLOB_API_URL — API 基础路径 <a class="header-anchor" href="#VITE-GLOB-API-URL-—-API-基础路径" aria-label="Permalink to &quot;VITE_GLOB_API_URL — API 基础路径&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:#62E884;--shiki-light:#59873A;">VITE_GLOB_API_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span></span></code></pre></div><table tabindex="0"><thead><tr><th>场景</th><th>值</th><th>说明</th></tr></thead><tbody><tr><td>开发（代理）</td><td>留空</td><td>由 Vite proxy 转发</td></tr><tr><td>生产（同域）</td><td>留空</td><td>由 Nginx 代理</td></tr><tr><td>生产（跨域）</td><td><code>https://api.example.com</code></td><td>直接请求后端域名</td></tr></tbody></table><h3 id="VITE-PROXY-—-开发代理配置" tabindex="-1">VITE_PROXY — 开发代理配置 <a class="header-anchor" href="#VITE-PROXY-—-开发代理配置" aria-label="Permalink to &quot;VITE_PROXY — 开发代理配置&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:#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.thinkphp8.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">]]</span></span></code></pre></div><p><strong>格式：</strong> JSON 数组，每项为 <code>[前缀, 目标地址]</code></p><p><strong>作用：</strong> 将前端 <code>/api/*</code> 请求代理到后端地址，解决开发环境跨域问题。</p><p><strong>多代理示例：</strong></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;">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://localhost:8080/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:#F6F6F4;--shiki-light:#999999;">[</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/upload</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://localhost:8080/upload</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">]</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">]</span></span></code></pre></div><h3 id="VITE-GLOB-API-URL-PREFIX-—-API-前缀" tabindex="-1">VITE_GLOB_API_URL_PREFIX — API 前缀 <a class="header-anchor" href="#VITE-GLOB-API-URL-PREFIX-—-API-前缀" aria-label="Permalink to &quot;VITE_GLOB_API_URL_PREFIX — API 前缀&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:#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><p>所有 API 请求路径的前缀，与后端路由前缀一致。</p><h3 id="VITE-GLOB-UPLOAD-URL-—-上传接口地址" tabindex="-1">VITE_GLOB_UPLOAD_URL — 上传接口地址 <a class="header-anchor" href="#VITE-GLOB-UPLOAD-URL-—-上传接口地址" aria-label="Permalink to &quot;VITE_GLOB_UPLOAD_URL — 上传接口地址&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:#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></code></pre></div><p>文件上传组件使用的接口地址。</p><h3 id="VITE-GLOB-IMG-URL-—-图片访问地址" tabindex="-1">VITE_GLOB_IMG_URL — 图片访问地址 <a class="header-anchor" href="#VITE-GLOB-IMG-URL-—-图片访问地址" aria-label="Permalink to &quot;VITE_GLOB_IMG_URL — 图片访问地址&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_GLOB_IMG_URL</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> =</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> http://file.thinkphp8.elevue</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://cdn.example.com</span></span></code></pre></div><p>用于预览上传的图片，拼接图片的完整 URL。</p><h3 id="VITE-DROP-CONSOLE-—-删除-console" tabindex="-1">VITE_DROP_CONSOLE — 删除 console <a class="header-anchor" href="#VITE-DROP-CONSOLE-—-删除-console" aria-label="Permalink to &quot;VITE_DROP_CONSOLE — 删除 console&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;"># 开发环境：保留 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;"> 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></code></pre></div><h3 id="VITE-BUILD-COMPRESS-—-Gzip-压缩" tabindex="-1">VITE_BUILD_COMPRESS — Gzip 压缩 <a class="header-anchor" href="#VITE-BUILD-COMPRESS-—-Gzip-压缩" aria-label="Permalink to &quot;VITE_BUILD_COMPRESS — Gzip 压缩&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:#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></code></pre></div><p>启用 gzip 压缩后，构建产物会生成 <code>.gz</code> 文件，Nginx 配置 <code>gzip_static on</code> 可直接使用。</p><h2 id="在代码中访问环境变量" tabindex="-1">在代码中访问环境变量 <a class="header-anchor" href="#在代码中访问环境变量" aria-label="Permalink to &quot;在代码中访问环境变量&quot;">​</a></h2><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;">// 读取环境变量（VITE_ 前缀的变量才会暴露给客户端）</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> apiUrl</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">meta</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">env</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_API_URL</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> apiPrefix</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">meta</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">env</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_API_URL_PREFIX</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> uploadUrl</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">meta</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">env</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_UPLOAD_URL</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> imgUrl</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">meta</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">env</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_GLOB_IMG_URL</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</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:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> fullApiUrl</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> apiUrl</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> +</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> apiPrefix</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 如 &quot;/api&quot; 或 &quot;https://api.example.com/api&quot;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">VITE_ 前缀</p><p>只有以 <code>VITE_</code> 开头的环境变量才会暴露给客户端代码，其他变量（如 <code>PORT</code>）不会被访问到。</p></div><h2 id="Vite-配置" tabindex="-1">Vite 配置 <a class="header-anchor" href="#Vite-配置" aria-label="Permalink to &quot;Vite 配置&quot;">​</a></h2><h3 id="vite-config-ts" tabindex="-1"><code>vite.config.ts</code> <a class="header-anchor" href="#vite-config-ts" aria-label="Permalink to &quot;\`vite.config.ts\`&quot;">​</a></h3><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:#F286C4;--shiki-light:#1E754F;">import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> defineConfig</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> loadEnv</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> from</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">vite</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">export</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> default</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> defineConfig</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;"> mode</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:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 加载环境变量</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> env</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> loadEnv</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">mode</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> process</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">cwd</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">());</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 开发服务器</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> server</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:#998418;"> port</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> Number</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">env</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_PORT</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">) </span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">||</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;"> 8001</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> proxy</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:#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:#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:#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.thinkphp8.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</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>
<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>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 构建配置</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> build</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:#7B7F8B;--shiki-light:#A0ADA0;"> // 生产环境删除 console</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> drop</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> env</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#B07D48;">VITE_DROP_CONSOLE</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> ===</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">true</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> ?</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;">console</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</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;">debugger</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">] </span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> [],</span></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> // 启用 gzip 压缩</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> rollupOptions</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:#998418;"> output</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:#998418;"> manualChunks</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:#998418;"> vue</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</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;">vue</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</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;">vue-router</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</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;">pinia</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">],</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> element</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</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;">element-plus</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><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>
<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>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">});</span></span></code></pre></div><h3 id="代理配置详解" tabindex="-1">代理配置详解 <a class="header-anchor" href="#代理配置详解" aria-label="Permalink to &quot;代理配置详解&quot;">​</a></h3><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;">// 开发环境代理配置</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;"> 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.thinkphp8.elevue/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;">// 目标地址</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:#62E884;--shiki-light:#59873A;">replace</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#EE6666;--shiki-light:#B5695977;">/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">^</span><span style="--shiki-dark:#E7EE98;--shiki-light:#BDA437;">\\/</span><span style="--shiki-dark:#E7EE98;--shiki-light:#AB5E3F;">api</span><span style="--shiki-dark:#EE6666;--shiki-light:#B5695977;">/</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;&#39;</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><strong>代理效果：</strong></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>前端请求: GET /api/user/page</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼ Vite proxy</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼ 转发到: http://admin.thinkphp8.elevue/api/user/page</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:#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;"># 构建生产版本</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:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> preview</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># ESLint 检查</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> lint:eslint</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># ESLint 自动修复</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> lint:eslint</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#A65E2B;"> --fix</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># TypeScript 类型检查</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> type:check</span></span></code></pre></div><h3 id="构建产物" tabindex="-1">构建产物 <a class="header-anchor" href="#构建产物" aria-label="Permalink to &quot;构建产物&quot;">​</a></h3><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>ui/dist/</span></span>
<span class="line"><span>├── index.html # 入口文件</span></span>
<span class="line"><span>├── assets/</span></span>
<span class="line"><span>│ ├── index-xxx.js # 主 JS（带 hash）</span></span>
<span class="line"><span>│ ├── index-xxx.css # 主 CSS（带 hash）</span></span>
<span class="line"><span>│ ├── vue-xxx.js # Vue 相关（分包）</span></span>
<span class="line"><span>│ └── element-xxx.js # ElementPlus（分包）</span></span>
<span class="line"><span>├── favicon.ico</span></span>
<span class="line"><span>└── static/ # 静态资源</span></span></code></pre></div><h2 id="部署配置" tabindex="-1">部署配置 <a class="header-anchor" href="#部署配置" aria-label="Permalink to &quot;部署配置&quot;">​</a></h2><h3 id="Nginx-配置" tabindex="-1">Nginx 配置 <a class="header-anchor" href="#Nginx-配置" aria-label="Permalink to &quot;Nginx 配置&quot;">​</a></h3><div class="language-nginx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">nginx</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">server</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> listen </span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;">80</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> server_name </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">admin.example.com</span><span style="--shiki-dark:#F6F6F4;--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:#F286C4;--shiki-light:#1E754F;"> root </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">/data/www/admin/dist</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> index </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">index.html</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # SPA 路由（所有非文件请求都返回 index.html）</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> location</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;"> / </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">{</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> try_files </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">$</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">uri</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> $</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">uri</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">/ /index.html</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><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:#F286C4;--shiki-light:#AB5959;"> location</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;"> /api/ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">{</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> proxy_pass </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">http://127.0.0.1:8080/api/</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> proxy_set_header </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">Host </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">$</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">host</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> proxy_set_header </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">X-Real-IP </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">$</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">remote_addr</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><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;"> # 静态资源缓存</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> location</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#59873A;"> /assets/ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">{</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> expires </span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;">30d</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> add_header </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">Cache-Control </span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">&quot;public, immutable&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><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;"> # Gzip 压缩</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> gzip </span><span style="--shiki-dark:#BF9EEE;--shiki-light:#1E754F;">on</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> gzip_static </span><span style="--shiki-dark:#BF9EEE;--shiki-light:#1E754F;">on</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # 优先使用 .gz 文件</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> gzip_types </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">text/css application/javascript application/json</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">}</span></span></code></pre></div><h2 id="多环境配置" tabindex="-1">多环境配置 <a class="header-anchor" href="#多环境配置" aria-label="Permalink to &quot;多环境配置&quot;">​</a></h2><h3 id="测试环境" tabindex="-1">测试环境 <a class="header-anchor" href="#测试环境" aria-label="Permalink to &quot;测试环境&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;"># .env.staging</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 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 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.thinkphp8.elevue</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></code></pre></div><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;"> build</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#A65E2B;"> --mode</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> staging</span></span></code></pre></div><h3 id="环境变量对照表" tabindex="-1">环境变量对照表 <a class="header-anchor" href="#环境变量对照表" aria-label="Permalink to &quot;环境变量对照表&quot;">​</a></h3><table tabindex="0"><thead><tr><th>变量</th><th>开发</th><th>测试</th><th>生产</th></tr></thead><tbody><tr><td><code>VITE_PORT</code></td><td>8001</td><td>-</td><td>-</td></tr><tr><td><code>VITE_GLOB_API_URL</code></td><td>留空</td><td>留空</td><td>留空</td></tr><tr><td><code>VITE_GLOB_API_URL_PREFIX</code></td><td>/api</td><td>/api</td><td>/api</td></tr><tr><td><code>VITE_GLOB_IMG_URL</code></td><td><a href="http://file.xxx" target="_blank" rel="noreferrer">http://file.xxx</a></td><td><a href="https://test-cdn.xxx" target="_blank" rel="noreferrer">https://test-cdn.xxx</a></td><td><a href="https://cdn.xxx" target="_blank" rel="noreferrer">https://cdn.xxx</a></td></tr><tr><td><code>VITE_DROP_CONSOLE</code></td><td>false</td><td>true</td><td>true</td></tr><tr><td><code>VITE_USE_MOCK</code></td><td>false</td><td>false</td><td>false</td></tr></tbody></table><h2 id="常见问题" tabindex="-1">常见问题 <a class="header-anchor" href="#常见问题" aria-label="Permalink to &quot;常见问题&quot;">​</a></h2><h3 id="问题-1-开发环境-API-请求-404" tabindex="-1">问题 1：开发环境 API 请求 404 <a class="header-anchor" href="#问题-1-开发环境-API-请求-404" aria-label="Permalink to &quot;问题 1：开发环境 API 请求 404&quot;">​</a></h3><p><strong>原因：</strong> 代理配置错误或后端未启动。</p><p><strong>解决：</strong> 检查 <code>.env.development</code> 中 <code>VITE_PROXY</code> 的目标地址是否正确。</p><h3 id="问题-2-生产环境-API-请求跨域" tabindex="-1">问题 2：生产环境 API 请求跨域 <a class="header-anchor" href="#问题-2-生产环境-API-请求跨域" aria-label="Permalink to &quot;问题 2：生产环境 API 请求跨域&quot;">​</a></h3><p><strong>原因：</strong> <code>VITE_GLOB_API_URL</code> 配置了跨域地址但后端未配置 CORS。</p><p><strong>解决：</strong> 推荐留空，由 Nginx 代理处理（同域无跨域问题）。</p><h3 id="问题-3-图片不显示" tabindex="-1">问题 3：图片不显示 <a class="header-anchor" href="#问题-3-图片不显示" aria-label="Permalink to &quot;问题 3：图片不显示&quot;">​</a></h3><p><strong>原因：</strong> <code>VITE_GLOB_IMG_URL</code> 配置错误。</p><p><strong>解决：</strong> 检查图片访问地址是否正确，确保图片 URL 可直接访问。</p><h3 id="问题-4-构建后体积过大" tabindex="-1">问题 4：构建后体积过大 <a class="header-anchor" href="#问题-4-构建后体积过大" aria-label="Permalink to &quot;问题 4：构建后体积过大&quot;">​</a></h3><p><strong>原因：</strong> 未启用 gzip 压缩或未分包。</p><p><strong>解决：</strong> 启用 <code>VITE_BUILD_COMPRESS = gzip</code>，配置 <code>manualChunks</code> 分包。</p>`,78)])])}const c=i(h,[["render",p]]);export{g as __pageData,c as default};
Reference in New Issue View Git Blame Copy Permalink