vue中svg图片名称乱码无法打包

这可能是由于打包工具无法正确解析 SVG 文件的名称所导致的。您可以尝试在 SVG 文件名中使用英文字母、数字和下划线，避免使用中文或其他非 ASCII 字符。

如果您使用的是 Webpack 打包工具，可以在 webpack.config.js 文件中添加以下代码来处理 SVG 文件：

{
  test: /\.svg$/,
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: 'icon-[name]'
      }
    }
  ]
}

这将使用 svg-sprite-loader 来处理 SVG 文件，并为每个 SVG 文件生成一个唯一的 symbol id，避免名称冲突。

相关问题

vue中设置svg图片的背景透明

在 Vue 中设置 SVG 图片的背景透明度，可以使用 CSS 中的 opacity 属性或 SVG 中的 fill-opacity 和 stroke-opacity 属性。

使用 opacity 属性：

<template>
  <div class="svg-container">
    <img src="./your-svg-file.svg" alt="SVG 图片" class="svg-image">
  </div>
</template>

<style>
.svg-container {
  opacity: 0.5; /* 设置半透明 */
}
</style>

使用 fill-opacity 和 stroke-opacity 属性：

<template>
  <div class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <path d="M10 50 L50 10 L90 50 L50 90 Z" fill="#000" fill-opacity="0.5" stroke="#fff" stroke-opacity="1" stroke-width="2"/>
    </svg>
  </div>
</template>

<style>
.svg-container svg path {
  fill-opacity: 0.5;
  stroke-opacity: 1;
}
</style>

这个示例中，.svg-container 是包含 SVG 图片的容器，.svg-image 是 SVG 图片的类名。使用 opacity 属性会使整个容器变得半透明，而使用 fill-opacity 和 stroke-opacity 属性只会影响 SVG 图片中的填充和边框的透明度，而不影响其中的文本。

请注意，使用 opacity 属性会使整个容器变得半透明，包括其中的任何其他元素。而使用 fill-opacity 和 stroke-opacity 属性只会影响 SVG 图片中的填充和边框的透明度，而不会影响其他元素。你可以根据需要选择使用哪种方法。

vue项目中通过地址引用svg图片

在Vue项目中，可以通过地址引用SVG图片。首先，将SVG文件保存在项目的某个目录下，比如在src目录下的assets文件夹内。然后，在需要使用SVG图片的组件中，可以通过`<img>`标签来引用SVG图片。在src属性中，指定SVG图片的路径即可。

例如，假设SVG文件保存在src/assets文件夹下，文件名为logo.svg。在组件中使用SVG图片，可以如下代码示例：

<template>
  <div>
    <img src="@/assets/logo.svg" alt="Logo">
  </div>
</template>

在这个例子中，"@/assets/logo.svg"是SVG图片的路径。"@/"是Vue CLI工具中对src目录的别名，使用这个别名可以方便地指向项目的根目录。所以，使用"@/assets/logo.svg"可以准确地指向SVG图片的位置。

通过上述方式，我们可以在Vue项目中通过地址引用SVG图片。需要注意的是，确保SVG文件的路径是正确的，并且项目的webpack配置支持加载SVG文件，否则可能会遇到图片无法正常显示的问题。