172 lines
57 KiB
JavaScript
172 lines
57 KiB
JavaScript
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 "9.3 环境与构建配置""></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 "环境变量文件""></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> > <code>.env.{mode}</code> > <code>.env</code></p><h2 id="开发环境配置" tabindex="-1">开发环境配置 <a class="header-anchor" href="#开发环境配置" aria-label="Permalink to "开发环境配置""></a></h2><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;"># 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 数组格式：[["前缀","目标地址"]]）</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.thinkphp8.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">]]</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"># 上传接口地址</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 "生产环境配置""></a></h2><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;"># 公共基础路径（通常为 /，如部署到子目录则设为 /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 "环境变量详解""></a></h2><h3 id="VITE-PORT-—-开发服务器端口" tabindex="-1">VITE_PORT — 开发服务器端口 <a class="header-anchor" href="#VITE-PORT-—-开发服务器端口" aria-label="Permalink to "VITE_PORT — 开发服务器端口""></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 "VITE_PUBLIC_PATH — 公共基础路径""></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 "VITE_GLOB_API_URL — API 基础路径""></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 "VITE_PROXY — 开发代理配置""></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;">"</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.thinkphp8.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</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://localhost:8080/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 style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/upload</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://localhost:8080/upload</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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 "VITE_GLOB_API_URL_PREFIX — API 前缀""></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 "VITE_GLOB_UPLOAD_URL — 上传接口地址""></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 "VITE_GLOB_IMG_URL — 图片访问地址""></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 "VITE_DROP_CONSOLE — 删除 console""></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 "VITE_BUILD_COMPRESS — Gzip 压缩""></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 "在代码中访问环境变量""></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;"> // 如 "/api" 或 "https://api.example.com/api"</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 "Vite 配置""></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 "\`vite.config.ts\`""></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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">vite</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> =></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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">http://admin.thinkphp8.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">true</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">console</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">debugger</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">vue</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">vue-router</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">pinia</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">element-plus</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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 "代理配置详解""></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;"> '</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.thinkphp8.elevue/api</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 目标地址</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:#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;">''</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 "构建命令""></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 "构建产物""></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 "部署配置""></a></h2><h3 id="Nginx-配置" tabindex="-1">Nginx 配置 <a class="header-anchor" href="#Nginx-配置" aria-label="Permalink to "Nginx 配置""></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;">"public, immutable"</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 "多环境配置""></a></h2><h3 id="测试环境" tabindex="-1">测试环境 <a class="header-anchor" href="#测试环境" aria-label="Permalink to "测试环境""></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 "环境变量对照表""></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 "常见问题""></a></h2><h3 id="问题-1-开发环境-API-请求-404" tabindex="-1">问题 1：开发环境 API 请求 404 <a class="header-anchor" href="#问题-1-开发环境-API-请求-404" aria-label="Permalink to "问题 1：开发环境 API 请求 404""></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 "问题 2：生产环境 API 请求跨域""></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 "问题 3：图片不显示""></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 "问题 4：构建后体积过大""></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};
|