静态资源处理策略

项目配置与基础使用

Vite.js 的配置文件位于项目根目录下的 vite.config.js。通过这个文件可以自定义构建行为、插件、服务器选项等。基本配置结构如下：

import { defineConfig } from 'vite'

export default defineConfig({
  // 配置选项
})

常用配置项包括：

• root: 项目根目录（默认 process.cwd()）
• base: 开发或生产环境服务的公共基础路径
• publicDir: 静态资源服务的文件夹（默认 'public'）
• server: 开发服务器选项
• build: 构建选项
• plugins: 插件数组

开发服务器配置示例：

server: {
  port: 3000,
  open: true,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

静态资源处理策略

Vite 采用独特的静态资源处理方式，与传统的打包工具不同。以下是核心处理策略：

文件导入处理

Vite 支持多种静态资源导入方式：

• 直接导入返回解析后的 URL
• 使用 ?url 后缀显式导入为 URL
• 使用 ?raw 后缀导入为字符串
• 使用 ?worker 后缀导入为 web worker

// 1. 直接导入
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

// 2. 显式URL导入
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

// 3. 原始字符串导入
import shaderString from './shader.glsl?raw'

公共目录处理

public 目录下的文件：

• 不会被 Vite 处理
• 会被直接复制到输出目录的根目录下
• 必须使用绝对路径引用

<!-- 引用 public 目录下的 favicon.ico -->
<link rel="icon" href="/favicon.ico" />

资源内联限制

小于 assetsInlineLimit 选项值（默认 4096，即 4kb）的资源会被内联为 base64 URL，否则会被复制到输出目录并生成哈希文件名。

build: {
  assetsInlineLimit: 8192 // 8kb
}

自定义资源处理

可以通过 assetsInclude 选项扩展 Vite 识别的静态资源类型：

assetsInclude: ['**/*.gltf', '**/*.mov']

特殊资源处理

JSON 文件

JSON 文件可以被直接导入并自动解析：

import pkg from './package.json'
console.log(pkg.version)

也支持具名导入：

import { version } from './package.json'

CSS 处理

Vite 支持直接导入 .css 文件，会将样式自动注入页面：

import './style.css'

CSS 模块可以通过 .module.css 后缀使用：

import styles from './module.module.css'
document.getElementById('foo').className = styles.className

静态资源路径处理

在模板中引用静态资源时，Vite 会自动处理路径：

<img src="@/assets/logo.png" />

JavaScript 中可以使用 new URL 动态获取资源：

const imgUrl = new URL('./img.png', import.meta.url).href

构建优化策略

代码分割

Vite 自动进行代码分割，可以通过动态导入实现更细粒度的分割：

const module = await import('./module.js')

手动指定分割点：

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor': ['vue', 'vue-router']
      }
    }
  }
}

资源指纹

生产构建时，Vite 会自动为资源生成哈希文件名：

build: {
  assetsDir: 'static',
  rollupOptions: {
    output: {
      assetFileNames: 'static/[name]-[hash][extname]',
      chunkFileNames: 'static/[name]-[hash].js',
      entryFileNames: 'static/[name]-[hash].js'
    }
  }
}

预构建依赖

Vite 会预构建依赖（node_modules 中的模块）以提高性能。可以手动配置：

optimizeDeps: {
  include: ['vue', 'vue-router'],
  exclude: ['vue-demi']
}

高级资源处理

WebAssembly 支持

Vite 支持直接导入 .wasm 文件：

import init from './module.wasm'

const instance = await init()

Web Workers

支持通过专用后缀导入 worker：

// worker.js
self.onmessage = (e) => {
  console.log(e.data)
  self.postMessage('pong')
}

// 主线程
import MyWorker from './worker?worker'
const worker = new MyWorker()
worker.postMessage('ping')

二进制资源

二进制资源可以通过 ?url 或 ?buffer 后缀导入：

import wasmUrl from './module.wasm?url'
import wasmBuffer from './module.wasm?buffer'

多页面应用处理

对于多页面应用，可以配置多个入口：

build: {
  rollupOptions: {
    input: {
      main: 'index.html',
      about: 'about.html',
      contact: 'contact.html'
    }
  }
}

每个 HTML 文件对应一个单独的入口点，Vite 会自动处理依赖关系。