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配置文件。

我该怎么做？

Answer 1

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

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

在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
}

在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

在nuxt.config.js

中注册服务器中间件

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

调用页面/组件中的api。我假设您在这里（axios-module）使用Axios。

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

    return { images }
  }
}
</script>

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

1 个答案: