Vue.js webpack：如何获取目录中的文件列表？

Question

我正在尝试获取 SPA 静态应用程序的“资产/插图”目录中所有文件的列表，作为要在我的 Vuex 商店中重新使用的 JSON 对象

资产/插图目录结构是：

assets
  illustrations
    ill-1
       prop-1-1.jpg
       prop-1_2.jpg
    ill-2
       prop-2-1.jpg
       prop-2_2.jpg
    ill-3
       prop-3-1.jpg
       prop-3_2.jpg

我的目标是拥有这样的对象：

  { illustrations: [ill-1: [prop-1-1.jpg, prop-1_2.jpg], ill-2: [prop-2-1.jpg, prop-2_2.jpg], ill-3: [prop-3-1.jpg, prop-3_2.jpg]] }

在我的 App.vue 中，当应用程序组件被挂载时，我会触发一个方法 getIllustrations()

<script>
export default {
  name: 'app',
  data () {
    return {}
  },
  methods: {
    getIllustrations () {
      const path = require('path')
      const fs = require('fs')
      fs.readdir(path.join(__dirname, 'assets/illustrations'), (err, items) => {
        if (err) { console.log(err) }
        console.log(items)
      })
    }
  },
  mounted () {
    this.getIllustrations()
  }
}
</script>

但我收到一个错误：

 Error in mounted hook: "TypeError: fs.readdir is not a function"

我还尝试在 main.js 文件（它在服务器上运行..）中运行这个函数同样的错误..

我哪里错了？感谢反馈

Answer 1

您可以利用 webpack 的 require.context() 在编译时列出给定目录中的文件。

https://webpack.js.org/guides/dependency-management/

const illustrations = require.context(
  '@/assets/illustrations',
  true,
  /^.*\.jpg$/
)
console.log(illustrations.keys())

Answer 2

fs是服务器端模块。您无法fs在浏览器中使用，没有解决方案，这在技术上是不可能的。

https://github.com/vuejs-templates/webpack/issues/262