如何在VueJS组件中导入SVG资源目录并转为数组引用？

你遇到的核心问题是webpack 默认不支持通过 glob 通配符（*.svg）直接批量导入模块，import * as levels from '@/assets/levels/*.svg'这种写法webpack无法识别，所以得换用webpack提供的require.contextAPI来实现批量加载，同时还要配置对应的loader让SVG内容能被正确渲染。

以下是具体的解决方案：

1. 用require.context批量加载SVG资源 #

webpack的require.context可以帮你遍历指定目录下的所有匹配文件，我们可以用它来批量获取levels目录下的所有SVG，再转换成方便访问的键值对结构。

2. 配置webpack将SVG加载为字符串 #

因为你的组件是用v-html渲染SVG内容，所以需要把SVG文件导入为原始字符串，这就需要用到raw-loader来处理。

如果是Vue CLI创建的项目，在根目录的vue.config.js中添加如下配置：

const { resolve } = require('path')

module.exports = {
  chainWebpack: config => {
    // 移除Vue CLI默认的svg规则，避免冲突
    config.module.rules.delete('svg')
    // 为levels目录下的SVG添加专属规则，用raw-loader加载为字符串
    config.module
      .rule('svg-raw')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/levels'))
      .end()
      .use('raw-loader')
      .loader('raw-loader')
      .end()
  }
}

别忘了安装依赖：

npm install raw-loader --save-dev
# 或者用yarn
yarn add raw-loader -D

3. 修改组件代码实现需求 #

把批量导入的逻辑整合到组件中，调整setLevel方法来正确获取对应SVG内容：

<template>
  <div v-html="image"></div>
</template>

<script>
// 创建SVG文件上下文，遍历levels目录下所有.svg文件
const svgContext = require.context('@/assets/levels', false, /\.svg$/)

// 转换为键值对：文件名（不带后缀）作为key，SVG字符串内容作为value
const levels = svgContext.keys().reduce((acc, path) => {
  // 提取文件名，比如 "./level1.svg" → "level1"
  const fileName = path.replace(/^\.\/(.*)\.svg$/, '$1')
  acc[fileName] = svgContext(path)
  return acc
}, {})

export default {
  name: "Level",
  data() {
    return {
      image: ''
    }
  },
  methods: {
    setLevel(levelNumber) {
      // 假设你的SVG文件命名是level1.svg、level2.svg...
      const targetKey = `level${levelNumber}`
      // 兜底处理，避免传入不存在的level时出现错误
      this.image = levels[targetKey] || ''
      
      // 如果你的SVG是直接用数字命名（比如1.svg、2.svg），改成下面这行：
      // this.image = levels[levelNumber.toString()] || ''
    }
  }
}
</script>

额外说明 #

• 如果你的levels目录下有子目录，把require.context的第二个参数改成true（表示递归遍历子目录）
• 如果后续需要把SVG作为Vue组件使用，可以替换为vue-svg-loader，但当前场景下raw-loader更适配v-html的渲染需求

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