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

Posted

技术标签:

【中文标题】NUXT:找不到模块:错误:无法解析“fs”【英文标题】:NUXT: Module not found: Error: Can't resolve '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模块吗? 没必要,但是可以 【参考方案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'
        

       // ....
    
  ,

【讨论】:

以上是关于NUXT:找不到模块:错误:无法解析“fs”的主要内容,如果未能解决你的问题,请参考以下文章

更新到 Angular v6 - 找不到模块:错误:无法解析“fs”

错误 - ./node_modules/busboy/lib/main.js:1:0 找不到模块:无法解析“fs”

NPM 无法安装 appjs。错误:找不到模块 'graceful-fs'

找不到模块:错误:无法解析模块“路由”

在 src/app 外部定义的模块显示错误“找不到模块:错误:无法解析 './' in”

VueJS - 找不到模块:错误:无法解析'@babel/runtime/regenerator'