NUXT：找不到模块：错误：无法解析'fs'

Question

我从 vue 和 nuxt 开始，我有一个使用 vuetify 的项目，我正在尝试修改轮播组件以从静态文件夹动态加载图像。到目前为止，我想出了：

     <template>
    <v-carousel>
        <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
    </v-carousel>
    </template>

    <script>
    function getImagePaths() {
        var glob = require("glob");
        var options = {
        cwd: "./static"
        };
        var fileNames = glob.sync("*", options);
        var items = [];
        fileNames.forEach(fileName =>
        items.push({
            'src': '/'+fileName
        })
        );
        return items;
    }
    export default {
        data() {
        return {items :getImagePaths()};
        }
    };

    </script>

当我测试这个时，我看到：

 ERROR in ./node_modules/fs.realpath/index.js
Module not found: Error: Can't resolve 'fs' in '....\node_modules\fs.realpath'
ERROR in ./node_modules/fs.realpath/old.js
Module not found: Error: Can't resolve 'fs' in ....\node_modules\fs.realpath'
ERROR in ./node_modules/glob/glob.js
Module not found: Error: Can't resolve 'fs' in '....\node_modules\glob'
ERROR in ./node_modules/glob/sync.js
Module not found: Error: Can't resolve 'fs' in '.....\node_modules\glob'

谷歌搜索这个我看到一堆参考资料，比如 https://github.com/webpack-contrib/css-loader/issues/447 。

这些建议您必须使用类似以下内容来修改 webpack 配置文件：

 node: {
  fs: 'empty'
}

我对 webpack 知之甚少。我找到了 https://nuxtjs.org/faq/extend-webpack/ ，但我不确定在这种情况下如何修改 webpack 配置文件。

我该怎么做呢？

原文由 user1592380 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在浏览器上使用 NodeJs 特定模块。

要解决您的问题，您可以使用 Nuxt 服务器中间件创建一个 API。下面的代码，灵感来自 https://github.com/nuxt-community/express-template 。

1. 在 --- 中创建一个文件 index.js api/index.js 。然后填写：

    const express = require('express')

   // Create express instance
   const app = express()

   // Require API routes
   const carousel = require('./routes/carousel')

   // Import API Routes
   app.use(carousel)

   // Export the server middleware
   module.exports = {
     path: '/api',
     handler: app
   }

1. 在 carousel.js api/routes/carousel.js 。然后填写：

    const { Router } = require('express')
   const glob = require('glob')

   const router = Router()

   router.get('/carousel/images', async function (req, res) {
     const options = {
       cwd: './static'
     }
     const filenames = glob.sync('*', options)

     let items = [];
     filenames.forEach(filename =>
       items.push({
         'src': '/'+filename
       })
     );

     return res.json({ data: items })
   })

   module.exports = router

1. 在 nuxt.config.js

    module.exports = {
     build: {
       ...
     },
     serverMiddleware: [
       '~/api/index.js'
     ]
   }

1. 在您的页面/组件中调用 api。我假设您在这里使用 Axios ( axios-module )。

    <script>
   export default {
     async asyncData ({ $axios }) {
       const images = (await $axios.$get('/api/carousel/images')).data

       return { images }
     }
   }
   </script>

原文由 nmfzone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道这是一个老问题，但它可能对某些人在浏览器中禁用 fs 有帮助。

像这样：

nuxt.config.js

   build: {
    extend (config, { isDev, isClient }) {

       config.node= {
          fs: 'empty'
        }

       // ....
    }
  },

原文由 ßãlãjî 发布，翻译遵循 CC BY-SA 4.0 许可协议