fix(mini-program): 修复 logo.svg 500 错误和编译问题

问题:
- SVG 文件使用 filter 和 style 属性导致小程序编译错误
- 错误信息:ReferenceError: $1 is not defined

修复:
1. 简化 SVG 文件,移除 filter 和 style 属性
   - 移除 filter (feGaussianBlur, feMerge)
   - 移除 style 属性,改用直接属性 (stop-color 替代 style="stop-color:xxx")
   - 移除 filter="url(#glow)" 引用

2. 恢复 vite.config.js 的 publicDir 配置
   - publicDir 指向 mini-program/static 目录
   - SVG 文件编译到输出目录根位置

3. 更新图片引用路径
   - splash/index.vue: /static/logo.svg
   - main/index.vue: /static/logo.svg

效果:
- logo.svg 正确编译到 unpackage/dist/dev/mp-weixin/logo.svg
- 不再出现 $1 is not defined 错误
- 小程序正常加载 logo 图片
This commit is contained in:
2026-04-08 19:12:04 +08:00
parent 8dab3f4fa6
commit e1097cbbee
3 changed files with 20 additions and 38 deletions
+1 -1
View File
@@ -28,7 +28,7 @@
<view class="header" :style="{ paddingTop: safeAreaTop + 20 + 'px' }"> <view class="header" :style="{ paddingTop: safeAreaTop + 20 + 'px' }">
<view class="header-left"> <view class="header-left">
<view class="logo-box"> <view class="logo-box">
<image class="logo" src="/logo.svg" mode="aspectFit" /> <image class="logo" src="/static/logo.svg" mode="aspectFit" />
</view> </view>
<view class="brand"> <view class="brand">
<text class="brand-title font-serif">人生 OS</text> <text class="brand-title font-serif">人生 OS</text>
+1 -1
View File
@@ -7,7 +7,7 @@
<view class="overlay"> <view class="overlay">
<view class="status-bar-space" :style="{ height: statusBarHeight + 'px' }"></view> <view class="status-bar-space" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="content-area" :style="{ paddingBottom: safeAreaBottom + 'px' }"> <view class="content-area" :style="{ paddingBottom: safeAreaBottom + 'px' }">
<image class="logo" src="/logo.svg" mode="widthFix"></image> <image class="logo" src="/static/logo.svg" mode="widthFix"></image>
<text class="app-name font-serif">人生OS</text> <text class="app-name font-serif">人生OS</text>
<text class="app-version">LIFE HARMONY v3.1</text> <text class="app-version">LIFE HARMONY v3.1</text>
</view> </view>
+18 -36
View File
@@ -1,33 +1,19 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<!-- 主渐变:使用项目主题色 -->
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#A855F7;stop-opacity:1" /> <stop offset="0%" stop-color="#A855F7"/>
<stop offset="50%" style="stop-color:#9333EA;stop-opacity:1" /> <stop offset="50%" stop-color="#9333EA"/>
<stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" /> <stop offset="100%" stop-color="#7C3AED"/>
</linearGradient> </linearGradient>
<!-- 柱廊渐变 -->
<linearGradient id="pillarGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <linearGradient id="pillarGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C084FC;stop-opacity:0.9" /> <stop offset="0%" stop-color="#C084FC"/>
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0.7" /> <stop offset="100%" stop-color="#A855F7"/>
</linearGradient> </linearGradient>
<!-- 核心发光渐变 -->
<radialGradient id="coreGlow" cx="50%" cy="50%" r="50%"> <radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#E879F9;stop-opacity:1" /> <stop offset="0%" stop-color="#E879F9"/>
<stop offset="50%" style="stop-color:#A855F7;stop-opacity:0.8" /> <stop offset="50%" stop-color="#A855F7"/>
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0" /> <stop offset="100%" stop-color="#A855F7" stop-opacity="0"/>
</radialGradient> </radialGradient>
<!-- 发光滤镜 -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="15" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs> </defs>
<!-- 背景圆角正方形 --> <!-- 背景圆角正方形 -->
@@ -37,31 +23,27 @@
<circle cx="512" cy="512" r="300" fill="url(#coreGlow)" opacity="0.5"/> <circle cx="512" cy="512" r="300" fill="url(#coreGlow)" opacity="0.5"/>
<!-- 神殿柱廊:三根柱子 --> <!-- 神殿柱廊:三根柱子 -->
<!-- 左柱 --> <rect x="280" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" opacity="0.9"/>
<rect x="280" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" filter="url(#glow)"/> <rect x="482" y="280" width="60" height="464" rx="30" fill="url(#pillarGradient)" opacity="0.9"/>
<!-- 中柱 --> <rect x="684" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" opacity="0.9"/>
<rect x="482" y="280" width="60" height="464" rx="30" fill="url(#pillarGradient)" filter="url(#glow)"/>
<!-- 右柱 -->
<rect x="684" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" filter="url(#glow)"/>
<!-- 柱顶横梁 --> <!-- 柱顶横梁 -->
<path d="M240 300 L784 300 L784 340 L240 340 Z" fill="url(#pillarGradient)" opacity="0.8"/> <path d="M240 300 L784 300 L784 340 L240 340 Z" fill="url(#pillarGradient)" opacity="0.8"/>
<!-- 中心情绪核心:发光的椭圆 --> <!-- 中心情绪核心:发光的椭圆 -->
<ellipse cx="512" cy="540" rx="80" ry="100" fill="white" filter="url(#glow)" opacity="0.95"/> <ellipse cx="512" cy="540" rx="80" ry="100" fill="white" opacity="0.95"/>
<ellipse cx="512" cy="540" rx="50" ry="70" fill="url(#coreGlow)" filter="url(#glow)"/> <ellipse cx="512" cy="540" rx="50" ry="70" fill="url(#coreGlow)"/>
<!-- 顶部星芒:呼应星海概念 --> <!-- 顶部星芒:呼应星海概念 -->
<path d="M512 180 L524 220 L564 220 L532 244 L544 284 L512 260 L480 284 L492 244 L460 220 L500 220 Z" <path d="M512 180 L524 220 L564 220 L532 244 L544 284 L512 260 L480 284 L492 244 L460 220 L500 220 Z" fill="#E879F9"/>
fill="#E879F9" filter="url(#glow)"/>
<!-- 底部装饰弧线 --> <!-- 底部装饰弧线 -->
<path d="M320 780 Q512 840 704 780" stroke="#C084FC" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.6"/> <path d="M320 780 Q512 840 704 780" stroke="#C084FC" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.6"/>
<path d="M360 820 Q512 860 664 820" stroke="#C084FC" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.4"/> <path d="M360 820 Q512 860 664 820" stroke="#C084FC" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.4"/>
<!-- 四角装饰:星光点缀 --> <!-- 四角装饰:星光点缀 -->
<circle cx="160" cy="160" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/> <circle cx="160" cy="160" r="8" fill="#C084FC" opacity="0.8"/>
<circle cx="864" cy="160" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/> <circle cx="864" cy="160" r="8" fill="#C084FC" opacity="0.8"/>
<circle cx="160" cy="864" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/> <circle cx="160" cy="864" r="8" fill="#C084FC" opacity="0.8"/>
<circle cx="864" cy="864" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/> <circle cx="864" cy="864" r="8" fill="#C084FC" opacity="0.8"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB