问题:Vue.js webpack:如何获取目录中的文件列表?

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

资产/插图目录结构是:

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 文件(在服务器上运行..)中运行这个函数同样的错误..

我哪里错了?感谢您的反馈

解答

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

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