https://fe-interview.pangcy.cn/tags/%E8%B7%AF%E5%BE%84%E5%A4%84%E7%90%86/Recent content in 路径处理 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/engineering/vite/vite-12/Wed, 05 Mar 2025 10:37:25 +0000https://fe-interview.pangcy.cn/docs/engineering/vite/vite-12/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><ol> <li> <p><strong>核心能力维度</strong>：</p> <ul> <li><strong>构建工具原理理解</strong>：Vite静态资源处理机制与构建流程的关联</li> <li><strong>工程化配置能力</strong>：配置扩展与优化静态资源处理策略</li> <li><strong>资源加载策略决策</strong>：不同引用方式的适用场景判断</li> </ul> </li> <li> <p><strong>技术评估点</strong>：</p> <ul> <li><code>import</code>资源处理流程与构建优化特性</li> <li><code>public</code>目录的特殊处理机制</li> <li>资源指纹与缓存控制实现</li> <li>路径解析规则差异</li> <li>构建体积与性能优化权衡</li> </ul> </li> </ol> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>资源处理器 &gt; 路径解析 &gt; 构建优化 &gt; 缓存策略</p> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li> <p><strong>import资源模式</strong>：</p> <ul> <li>Vite通过<code>@rollup/plugin-image</code>等插件处理JS模块导入的静态资源</li> <li>资源被转换为ES模块并返回解析后的URL（如<code>import img from './a.png'</code>）</li> <li>构建时自动添加哈希指纹实现长期缓存（Cache Busting）</li> <li>支持?url原始引入、?raw源码引入等查询参数</li> </ul> </li> <li> <p><strong>public目录模式</strong>：</p> <ul> <li>位于项目根目录的<code>public</code>文件夹直接映射到构建输出根目录</li> <li>资源通过绝对路径访问（如<code>/robots.txt</code>）</li> <li>不经过构建管道，保留原始结构与文件名</li> <li>适用于必须保持名称不变的场景（如favicon.ico）</li> </ul> </li> <li> <p><strong>路径解析差异</strong>：</p> </li> </ol> <div class="prism-codeblock "> <pre id="8a526d7" class="language-javascript "> <code>// import方式（相对路径） import logo from &#39;@/assets/logo.png&#39; // 输出为/assets/logo.6d5c82.png // public方式（绝对路径） &lt;img src=&#34;/logo.png&#34;&gt; // 对应public/logo.png原始文件</code> </pre> </div> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>误将public资源用相对路径引用</li> <li>混淆开发环境与生产环境的路径基准</li> <li>对大文件使用import导致构建缓慢</li> </ul> <hr> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>Vite通过两种机制处理静态资源：</p> <p><strong>1. 配置方式</strong>：</p> <div class="prism-codeblock "> <pre id="7ca39d4" class="language-javascript "> <code>// vite.config.js export default { assetsInclude: [&#39;**/*.gltf&#39;], // 扩展支持格式 build: { assetsDir: &#39;static&#39;, // 修改输出目录 assetsInlineLimit: 4096 // 调整base64内联阈值 } }</code> </pre> </div> <p><strong>2. 引用方式对比</strong>：</p>