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

【问题标题】：NUXT: Module not found: Error: Can't resolve 'fs'NUXT：找不到模块：错误：无法解析“fs”
【发布时间】：2019-05-31 03:04:51
【问题描述】：

我从 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 配置文件进行 midify：

node: {
  fs: 'empty'
}

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

我该怎么做？

【问题讨论】：

你不能在客户端使用 fs 模块
好的，你有什么建议。
创建一个 api 端点，该端点将返回图像的图像 url 并进行 api 调用以将其放入 asyncData
这个需要axios模块吗？
没必要，但是可以

标签： node.js vue.js webpack nuxt.js

【解决方案1】：

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

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

在api/index.js 中创建一个文件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
}

在api/routes/carousel.js 中创建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 (axios-module)。

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

    return { images }
  }
}
</script>

【讨论】：

非常感谢您提供详细的示例代码。基于此代码和 express-template，我设法根据路由名称从动态页面中的特定目录加载图像。但是，我发现这种自定义 API 不适用于使用 nuxt generate 的静态生成站点。如果我理解正确，这是因为根本没有任何服务器可以调用我们的 API。我想知道有什么解决方法吗？是否可以将此处显示的自定义 API 用于静态站点？

【解决方案2】：

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

nuxt.config.js

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

       config.node= {
          fs: 'empty'
        }

       // ....
    }
  },

【讨论】：