vite.config.js中加载svg

在Vite配置文件vite.config.js中加载SVG通常涉及到处理静态资源，特别是当项目需要在不同组件中复用SVG图标时。你可以通过Vite的内置优化插件，如vite-plugin-svg-icons或手动配置来实现SVG的导入和使用。

以下是一个简单的示例，展示如何在vite.config.js中设置SVG图标：

import { defineConfig } from 'vite';
import svgIconLoader from 'vite-plugin-svg-icons';

// Vite配置
export default defineConfig({
  plugins: [
    // 加载SVG图标
    svgIconLoader({
      src: './src/icons', // SVG文件所在的路径
      dest: 'public/assets/icons', // 输出到的目标目录
      aliases: {
        '@icons': '/assets/icons', // 使用别名访问图标
      },
    }),
  ],
});

在这个配置中，`vite-plugin-svg-icons`会自动查找指定目录下的SVG文件，并将它们转换为CSS类名可以引用的形式。然后，你可以通过`<use xlink:href="@icons/my-icon.svg">`这样的HTML结构，在需要的地方引入SVG图标。

相关问题

failed to load config from C:\Users\Administrator\Desktop\琪迹官网\pc端\APENG\vite.config.js error when starting dev server: TypeError: (0 , import_vite_svg_plugin.default) is not a function at Object.<anonymous> (C:\Users\Administrator\Desktop\琪迹官网\pc端\APENG\vite.config.js:45:40) at Module._compile (node:internal/modules/cjs/loader:1256:14) at _require.extensions.<computed> [as .js] (file:///C:/Users/Administrator/Desktop/%E7%90%AA%E8%BF%B9%E5%AE%98%E7%BD%91/pc%E7%AB%AF/APENG/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64524:24) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Module.require (node:internal/modules/cjs/loader:1143:19) at require (node:internal/modules/cjs/helpers:110:18) at loadConfigFromBundledFile (file:///C:/Users/Administrator/Desktop/%E7%90%AA%E8%BF%B9%E5%AE%98%E7%BD%91/pc%E7%AB%AF/APENG/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64532:21) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async loadConfigFromFile (file:///C:/Users/Administrator/Desktop/%E7%90%AA%E8%BF%B9%E5%AE%98%E7%BD%91/pc%E7%AB%AF/APENG/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64388:28)

根据错误消息，似乎在加载 Vite 配置文件 `vite.config.js` 时出现了问题。具体地，它指出在 `vite.config.js` 文件中的第 45 行尝试调用 `(0, import_vite_svg_plugin.default)`，但该方法不是一个函数。

要解决这个问题，你可以尝试以下几个步骤：

1. 确保 `vite-svg-plugin` 插件已正确安装：首先，请确保你已经在项目中正确安装了 `vite-svg-plugin` 插件。可以使用以下命令重新安装插件：

   npm install vite-svg-plugin --save-dev

2. 检查插件的导入方式：在你的 `vite.config.js` 文件中，请确保你正确导入了 `vite-svg-plugin` 插件。可以使用以下语句进行导入：

   import svgPlugin from 'vite-svg-plugin';

如果你使用的是旧版本的插件，可以尝试使用以下导入语句：

   import { default as svgPlugin } from 'vite-plugin-svg';

根据你使用的插件版本，选择适合的导入语句。

3. 检查插件的配置：在 `vite.config.js` 文件中，请确保正确配置了 `vite-svg-plugin` 插件。在 `plugins` 配置中添加插件实例：

   export default defineConfig({
     plugins: [
       svgPlugin(),
     ],
   });

确保你在 `plugins` 数组中添加了 `svgPlugin()`。

如果你仍然遇到问题，请检查你的项目中是否有其他配置或插件与 `vite-svg-plugin` 冲突，并尝试解决冲突。如果问题仍然存在，请提供更多的错误细节和相关代码，以便我能够更好地帮助你解决问题。

vite vue svg

vite是一个现代化的前端构建工具，用于快速构建Vue项目。它支持使用插件来加载和处理各种文件类型，包括SVG图标文件。

在使用vite构建Vue项目时，你可以通过安装vite-svg-loader插件，并在vite.config.js中进行相关配置来处理SVG图标文件。你需要指定需要缓存的SVG图标文件夹，并设置symbolId格式，这个格式与在引入SVG组件时的name配置项有关。

然后，你可以在项目中创建一个文件夹，并将SVG图标放入其中。接下来，在main.js文件中引入并注册SvgIcon组件。这个组件可以显示SVG图标，你可以通过传入name、prefix和color属性来自定义图标的名称、前缀和颜色。

最后，全局注册SvgIcon组件，这样你就可以在项目的任何地方使用它来显示SVG图标了。

综上所述，vite可以很方便地处理和使用SVG图标文件，并且通过SvgIcon组件可以轻松地在Vue项目中显示这些图标。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载](https://download.csdn.net/download/weixin_42176827/18659286)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3+vite配置svg文件的全局使用（想怎么改颜色、宽高都可以）](https://blog.csdn.net/m0_38134431/article/details/125508459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]