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'