ViteJS执行npm run build构建时部分图片资源未被打包问题求助

DevOps 小满

2026-10-2

问题描述

我在构建含图片资源的Vanilla JS项目时，执行npm run build命令后，存在1张图片未被打包进产物的问题。
未被打包的是我最后粘贴进项目的图片
所有图片我均采用相同方式引入，在同一个文件中使用import ... from "filename.png"语法声明导入。
以下是npm run build的输出结果
注意可以明确看到ash.png未被纳入产物，而同文件夹下的player.png正常打包，二者在同一文件中按上述相同方式引入。

❯  npm run build

> clean-rpg@0.0.0 build D:\Sattwik\code\web\js\game-dev\clean-rpg
> tsc && vite build

vite v2.5.6 building for production...
✓ 22 modules transformed.
dist/assets/favicon.17e50649.svg        1.49 KiB
dist/assets/room-builder.325bbcfc.png   20.98 KiB
dist/assets/things.5fe02e3d.png         27.07 KiB
dist/assets/player.c5281145.png         7.15 KiB
dist/assets/ground.8651476d.png         69.11 KiB
dist/assets/interior.294e2488.png       203.12 KiB
dist/index.html                         0.78 KiB
dist/assets/index.cc5b3aa7.css          2.35 KiB / brotli: 1.40 KiB
dist/assets/index.f94427a3.js           137.68 KiB / brotli: 8.73 KiB
dist/assets/vendor.354f1e58.js          1305.08 KiB / brotli: skipped (large chunk)

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking
- Adjust chunk size warning limit for this warning via build.chunkSizeWarningLimit.

执行npm run dev启动开发服务器时，所有图片均可正常加载，功能无异常
但执行构建后使用npm run serve预览时，ash.png无法加载，控制台抛出警告vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet

复现方式

可获取对应完整的项目文件与资源，按以下步骤操作：

执行npm run dev启动开发服务器，项目可正常运行（游戏会正常加载player.png和ash.png两张图片）
依次执行npm run build和npm run serve预览，即可复现该问题

系统信息

❯  npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
npx: installed 1 in 6.14s

  System:
    OS: Windows 7 6.1.7601
    CPU: (2) x64 Pentium(R) Dual-Core  CPU      E5300  @ 2.60GHz
    Memory: 1.10 GB / 2.99 GB
  Binaries:
    Node: 12.21.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Internet Explorer: 8.0.7601.17514
  npmPackages:
    vite: ^2.5.4 => 2.5.6

使用的包管理器

npm

构建日志

❯  npx vite build --debug
  vite:config no config file found. +0ms
  vite:config using resolved config: {
  vite:config   root: 'D:/Sattwik/code/web/js/game-dev/clean-rpg',
  vite:config   base: '/',
  vite:config   mode: 'production',
  vite:config   configFile: undefined,
  vite:config   logLevel: undefined,
  vite:config   clearScreen: undefined,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   configFileDependencies: [],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: 'D:\\Sattwik\\code\\web\\js\\game-dev\\clean-rpg\\public',
  vite:config   cacheDir: 'D:\\Sattwik\\code\\web\\js\\game-dev\\clean-rpg\\node_modules\\.vite',
  vite:config   command: 'build',
  vite:config   isProduction: true,
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'asset-import-meta-url',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'load-fallback'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +46ms
vite v2.5.6 building for production...
transforming (1) index.html  vite:resolve 0ms   ./assets/ui/msg-box.png -> D:/Sattwik/code/web/js/game-dev/clean-rpg/src/assets/ui/msg-box.png +0ms
✓ 22 modules transformed.
dist/assets/favicon.17e50649.svg        1.49 KiB
dist/assets/player.c5281145.png         7.15 KiB
dist/assets/room-builder.325bbcfc.png   20.98 KiB
dist/assets/things.5fe02e3d.png         27.07 KiB
dist/assets/ground.8651476d.png         69.11 KiB
dist/assets/interior.294e2488.png       203.12 KiB
dist/index.html                         0.78 KiB
dist/assets/index.cc5b3aa7.css          2.35 KiB / brotli: 1.40 KiB
dist/assets/index.f94427a3.js           137.68 KiB / brotli: 8.73 KiB
dist/assets/vendor.354f1e58.js          1305.08 KiB / brotli: skipped (large chunk)

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

GitHub Issue

该问题已在GitHub提交Issue。

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

ViteJS执行npm run build构建时部分图片资源未被打包问题求助

问题描述 #

复现方式 #

系统信息 #

使用的包管理器 #

构建日志 #

GitHub Issue #

问题描述

复现方式

系统信息

使用的包管理器

构建日志

GitHub Issue