如何为单个文件覆盖Vite全局assetsInlineLimit配置？

先检查Vite版本和?inline的正确用法 #

Vite 2.6及以上版本支持?inline查询参数，这个参数是强制把资源转成Base64内联的，不受全局assetsInlineLimit: 0的限制。如果你的Vite版本达标，先确认代码里的用法有没有问题：

比如在Vue里：

<template>
  <img :src="errorImg" alt="网络错误" />
</template>

<script setup>
// 路径要写对，?inline必须紧跟文件名
import errorImg from './assets/error-page.png?inline'
</script>

纯JS里这么用：

import errorImg from './assets/error-page.png?inline'
const img = document.createElement('img')
img.src = errorImg
document.body.appendChild(img)

要是还是不生效，试试用项目根目录的绝对路径导入，比如/src/assets/error-page.png?inline，可能是相对路径的问题。

用?raw手动转Base64（不用外部库） #

如果?inline就是不管用，别用外部库了，直接用Vite自带的?raw拿文件原始内容，自己转Base64：

import errorImgRaw from './assets/error-page.png?raw'

// 把原始内容转成Base64格式
const uint8Array = new TextEncoder().encode(errorImgRaw)
const base64 = btoa(String.fromCharCode(...uint8Array))
const errorImg = `data:image/png;base64,${base64}`

这种方式完全在代码里处理，不需要改任何配置。

自定义Vite插件（不修改原配置文件） #

要是项目允许你通过启动命令指定额外配置，不用改原vite.config.ts，可以写个简单插件来处理?inline的图片：

1. 新建vite-inline-plugin.js文件：

const fs = require('fs')
const path = require('path')

module.exports = function inlineImagePlugin() {
  return {
    name: 'inline-image',
    transform(code, id) {
      // 匹配带?inline后缀的图片文件
      const match = id.match(/^(.+\.(png|jpg|jpeg))\?inline$/)
      if (match) {
        const filePath = path.resolve(match[1])
        const fileBuffer = fs.readFileSync(filePath)
        const base64Str = fileBuffer.toString('base64')
        const mimeType = match[2] === 'png' ? 'image/png' : 'image/jpeg'
        return `export default "data:${mimeType};base64,${base64Str}"`
      }
    }
  }
}

2. 新建vite.config.custom.js继承原配置：

import { defineConfig } from 'vite'
import inlinePlugin from './vite-inline-plugin.js'
import originalConfig from './vite.config.ts'

export default defineConfig({
  ...originalConfig,
  plugins: [...(originalConfig.plugins || []), inlinePlugin()]
})

3. 修改package.json的启动脚本，用自定义配置文件：

{
  "scripts": {
    "dev": "vite --config vite.config.custom.js",
    "build": "vite build --config vite.config.custom.js"
  }
}

这样既保留了原配置的所有设置，又能让?inline语法正常生效。

内容的提问来源于stack exchange，提问作者Darky WC