编辑“︁Vue.js静态资源处理”︁（章节）

= Vue.js静态资源处理 =

静态资源处理是Vue.js项目构建与部署中的核心环节，涉及图片、字体、样式表等非代码文件的加载、优化和版本控制。本章将系统讲解Vue CLI和Vite构建工具下的处理机制。

== 基础概念 ==
'''静态资源'''指在应用程序运行时不需编译或动态生成的文件，包括：
* 图片（`.png`, `.jpg`, `.svg`）
* 字体文件（`.woff`, `.ttf`）
* 样式表（`.css`）
* 媒体文件（`.mp3`, `.mp4`）

在Vue.js中，这些资源可通过两种方式引用：
# '''绝对路径引用'''：文件放置在`public`目录，直接通过根路径访问
# '''模块化引用'''：文件放置在`src/assets`目录，通过Webpack/Vite处理

<mermaid>
graph LR
    A[静态资源] --> B{引用方式}
    B --> C[public目录]
    B --> D[assets目录]
    C --> E[直接复制到dist]
    D --> F[经过构建处理]
</mermaid>

== 资源引用方法 ==
=== public目录引用 ===
适合以下场景：
* 需要保留原文件名
* 文件体积较大不需优化
* 通过CDN引入的第三方库

```html
<!-- 直接使用绝对路径 -->
<img src="/images/logo.png">
```

=== assets目录引用 ===
推荐方式，会经过以下处理：
1. 文件名添加哈希（缓存控制）
2. 小文件自动转为Base64
3. 图片压缩（生产环境）

```javascript
// 模块化导入
import logo from '@/assets/logo.png'

export default {
  data() {
    return {
      imgSrc: logo
    }
  }
}
```

== 构建工具差异 ==
{| class="wikitable"
|-
! 特性 !! Vue CLI (Webpack) !! Vite
|-
| 资源转换 || 通过`file-loader`/`url-loader` || 原生ES模块
|-
| 路径别名 || 默认`@`指向`src` || 需手动配置
|-
| 处理速度 || 中等 || 极快（无需打包）
|}

=== Webpack配置示例 ===
```javascript
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .use('url-loader')
          .loader('url-loader')
          .options({
            limit: 4096, // 4KB以下转Base64
            name: 'img/[name].[hash:8].[ext]'
          })
  }
}
```

=== Vite配置示例 ===
```javascript
// vite.config.js
export default defineConfig({
  assetsInclude: ['**/*.hdr'], // 自定义资源类型
  build: {
    assetsInlineLimit: 4096 // 与Webpack类似
  }
})
```

== 高级处理技巧 ==
=== SVG组件化 ===
将SVG转换为Vue组件实现样式控制：

```vue
<template>
  <svg :class="iconClass" v-bind="$attrs">
    <use :xlink:href="`#${iconId}`" />
  </svg>
</template>

<script>
export default {
  props: ['iconId', 'iconClass']
}
</script>
```

=== 资源预加载 ===
通过`<link rel="preload">`提升关键资源加载速度：

```html
<!-- 在public/index.html中添加 -->
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
```

== 性能优化 ==
数学公式表示资源优化效果：
<math>
\Delta T = \frac{OriginalSize - CompressedSize}{OriginalSize} \times 100\%
</math>

优化策略包括：
1. 图片格式选择（WebP > PNG > JPEG）
2. 雪碧图生成（通过`postcss-sprites`）
3. 字体子集化（使用`fontmin`）

== 常见问题解决 ==
{{Warning|路径错误是最常见问题}}

* '''问题1'''：生产环境图片404
  * 原因：使用了绝对路径但未放public目录
  * 解决：检查路径或改用模块导入

* '''问题2'''：字体文件跨域
  * 原因：CDN未配置CORS
  * 解决：添加`crossorigin`属性

```html
<link href="https://cdn.example.com/font.woff2" rel="stylesheet" crossorigin>
```

== 实战案例 ==
'''电商网站资源优化方案'''
1. 产品图使用WebP格式（节省30%体积）
2. 关键CSS内联
3. 非首屏图片懒加载

```javascript
// 图片懒加载指令
Vue.directive('lazyload', {
  inserted(el) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        el.src = el.dataset.src
        observer.unobserve(el)
      }
    })
    observer.observe(el)
  }
})
```

== 延伸阅读 ==
* [官方资源处理指南](https://vuejs.org/guide/best-practices/asset-handling.html)
* Webpack Asset Modules文档
* Vite静态资源处理机制

{{Vue.js部署与构建导航}}

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js部署与构建]]