解决 Vite 构建中外部分静态资源错误路径，轻松解决图片等资源访问问题

解决 Vite 构建中外部分静态资源错误路径问题

问题

当在 Astro 中使用 Vue 组件时，组件中引用的外部静态资源在 Vite 构建后会出现错误的路径。这通常是由 Vite 默认不打包外部静态资源所引起的。

原因

为了优化构建性能，Vite 默认不会将外部静态资源（如图像、字体等）打包到构建中。这使得这些资源在构建后无法访问。

解决方法

要解决此问题，需要手动将外部静态资源添加到 Vite 配置中：

1. 在 Vite 配置中添加静态资源目录

   在项目的 vite.config.js 文件中，找到 build 对象并添加 assetsInclude 选项：

   export default defineConfig({
     build: {
       assetsInclude: ['**/*.png'],
     },
   });
   

   这将告诉 Vite 将所有 .png 文件包含在构建中。

2. 导入图像

   现在可以使用 ES6 导入的方式导入图像：

   import bmeLogo from './assets/bme-logo.png';
   

3. 使用导入的图像

   在组件中使用导入的图像：

   <img :src="bmeLogo" alt="BME Logo" />
   

其他建议

• 确保图像文件位于 assets 目录中。
• 尝试清除 Vite 缓存：rm -rf node_modules/.vite。
• 如果仍然遇到问题，请检查 Vite 文档或社区论坛以获取更多帮助。

问题示例

HTML 代码：

<img src="./assets/bme-logo.png" />

生成的 HTML 代码：

<img src="/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@visable-dev/vue/components/VisPageFooter/assets/bme-logo.png" data-v-7a2c58b2="">

解决方案：

在 vite.config.js 文件中添加：

export default defineConfig({
  build: {
    assetsInclude: ['**/*.png'],
  },
});

更新后的 HTML 代码：

<img src="./assets/bme-logo.png" />

常见问题解答

1. 为什么 Vite 默认不打包外部静态资源？

   为了优化构建性能，减少构建文件的大小。

2. 除了 assetsInclude 选项之外，还有其他方法将静态资源添加到 Vite 构建吗？

   是的，可以使用 copy 插件或 svgr 插件。

3. 如何使用 copy 插件将静态资源添加到 Vite 构建？

   在 vite.config.js 文件中安装并使用 vite-plugin-copy 插件：

   import copy from 'vite-plugin-copy';
   
   export default defineConfig({
     plugins: [
       copy({
         targets: [
           { src: 'assets', dest: 'dist/assets' },
         ],
       }),
     ],
   });
   

4. 如何使用 svgr 插件将 SVG 图像添加到 Vite 构建？

   在 vite.config.js 文件中安装并使用 vite-plugin-svgr 插件：

   import svgr from 'vite-plugin-svgr';
   
   export default defineConfig({
     plugins: [
       svgr(),
     ],
   });
   

5. 如果仍然无法解决问题，该如何寻求帮助？

   可以查看 Vite 文档、社区论坛或在 GitHub 上提交 issue。