某些文件未捆绑在 ViteJS 中

Question

错误

\n

\n

• 在使用图像资产捆绑Vanilla JSnpm run build项目时，有一个图像未捆绑。

  \n
\n

• 未捆绑的图像是要粘贴到我的项目中的最后一个图像
  \n

  \n
\n

• 我已使用同一个文件中的语法以相同的方式导入了所有import ... from "filename.png"图像。\n

  \n
\n

• npm run build这是\n注意的输出，显然，ash.png不包含在内，而player.png包含在同一文件夹中。两者都以与上面所示相同的方式导入到同一文件中。

  \n
\n

\n

\xe2\x9d\xaf  npm run build\n\n> clean-rpg@0.0.0 build D:\\Sattwik\\code\\web\\js\\game-dev\\clean-rpg\n> tsc && vite build\n\nvite v2.5.6 building for production...\n\xe2\x9c\x93 22 modules transformed.\ndist/assets/favicon.17e50649.svg        1.49 KiB\ndist/assets/room-builder.325bbcfc.png   20.98 KiB\ndist/assets/things.5fe02e3d.png         27.07 KiB\ndist/assets/player.c5281145.png         7.15 KiB\ndist/assets/ground.8651476d.png         69.11 KiB\ndist/assets/interior.294e2488.png       203.12 KiB\ndist/index.html                         0.78 KiB\ndist/assets/index.cc5b3aa7.css          2.35 KiB / brotli: 1.40 KiB\ndist/assets/index.f94427a3.js           137.68 KiB / brotli: 8.73 KiB\ndist/assets/vendor.354f1e58.js          1305.08 KiB / brotli: skipped (large chunk)\n\n(!) Some chunks are larger than 500 KiB after minification. Consider:\n- Using dynamic import() to code-split the application\n- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks\n- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.\n

\n

\n
• 使用 启动开发服务器时npm run dev，所有图像都会加载并且一切正常
\n
• 但是在使用 构建和预览后npm run serve，ash.png无法加载并vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet在控制台中显示警告
\n

\n

再生产

\n

请参阅此处的存储库，其中包含所有文件和资产

\n

\n
1. 运行开发服务器npm run dev，项目应该可以工作（游戏应该加载图像 -player.png和ash.png）
\n
2. 使用npm run buildthen进行预览npm run serve并重现错误
\n

\n

系统信息

\n

\xe2\x9d\xaf  npm run build\n\n> clean-rpg@0.0.0 build D:\\Sattwik\\code\\web\\js\\game-dev\\clean-rpg\n> tsc && vite build\n\nvite v2.5.6 building for production...\n\xe2\x9c\x93 22 modules transformed.\ndist/assets/favicon.17e50649.svg        1.49 KiB\ndist/assets/room-builder.325bbcfc.png   20.98 KiB\ndist/assets/things.5fe02e3d.png         27.07 KiB\ndist/assets/player.c5281145.png         7.15 KiB\ndist/assets/ground.8651476d.png         69.11 KiB\ndist/assets/interior.294e2488.png       203.12 KiB\ndist/index.html                         0.78 KiB\ndist/assets/index.cc5b3aa7.css          2.35 KiB / brotli: 1.40 KiB\ndist/assets/index.f94427a3.js           137.68 KiB / brotli: 8.73 KiB\ndist/assets/vendor.354f1e58.js          1305.08 KiB / brotli: skipped (large chunk)\n\n(!) Some chunks are larger than 500 KiB after minification. Consider:\n- Using dynamic import() to code-split the application\n- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks\n- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.\n

\n

使用的包管理器

\n

新项目管理

\n

日志

\n

\xe2\x9d\xaf  npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers\nnpx: installed 1 in 6.14s\n\n  System:\n    OS: Windows 7 6.1.7601\n    CPU: (2) x64 Pentium(R) Dual-Core  CPU      E5300  @ 2.60GHz\n    Memory: 1.10 GB / 2.99 GB\n  Binaries:\n    Node: 12.21.0 - C:\\Program Files\\nodejs\\node.EXE\n    npm: 6.14.11 - C:\\Program Files\\nodejs\\npm.CMD\n  Browsers:\n    Internet Explorer: 8.0.7601.17514\n  npmPackages:\n    vite: ^2.5.4 => 2.5.6\n

\n

GitHub 问题

\n

这个问题已作为Github 问题提出

\n

Answer 1

这不是bug，而是 vite 的Static Assets Handling行为。

小于该选项的字节数的资源assetsInlineLimit将被内联为 base64 数据 URL。

这意味着ash.png您data URI可以在输出中读取它，但在您的情况下不支持（这是另一个问题的范围，我现在没有答案）。

vendor.354f1e58.js:105 不支持本地数据 URI：ash-spritesheet 显示在控制台中

如果您进行调试spritesheets，console.log(spritesheets)您应该会看到包含的资产：

{
  player: '/assets/player.c5281145.png'
  ash: "data:image/png;base64,iVBORw0KGgoA ..."
}

现在，如果您设置assetsInlineLimit的值低于文件大小，ash.png则vite.config.js该文件将作为资产包含在内。

要测试它，请在文件中vite.config.js写入：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    assetsInlineLimit: '2048' // 2kb
  }
});

yarn build和的输出assetsInlineLimit: '2048'：

dist/assets/favicon.17e50649.svg                1.49 KiB
dist/assets/ground.8651476d.png                 69.11 KiB
dist/assets/player.c5281145.png                 7.15 KiB
dist/assets/things.5fe02e3d.png                 27.07 KiB
dist/assets/room-builder.325bbcfc.png           20.98 KiB
dist/assets/interior.294e2488.png               203.12 KiB

dist/assets/ash-walking-fire-red.1de7621c.png   3.76 KiB

更多信息： https: //vitejs.dev/guide/assets.html#importing-asset-as-url