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.

Это говорит о том, что вам нужно преобразовать файл конфигурации веб-пакета примерно так:

node: {
  fs: 'empty'
}

Я очень мало знаю о веб-пакете. Я нашел https://nuxtjs.org/faq/extend-webpack/, но не уверен, как изменить файл конфигурации webpack в этом случае.

Как мне это сделать?

Answer 1

Вы не можете использовать специальный модуль NodeJ в браузере.

Чтобы решить вашу проблему, вы можете создать API, используя промежуточное ПО сервера Nuxt. Код ниже, вдохновленный 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
   }
   

2. Создать 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
   

3. Зарегистрируйте серверное промежуточное ПО в nuxt.config.js

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

4. Вызовите API на своей странице / компоненте. Я предполагаю, что вы используете Axios здесь ( axios-module ).

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