如何在 Nuxt 构建期间访问远程数据并将其写入文件？

Posted 2023-02-22

【中文标题】如何在 Nuxt 构建期间访问远程数据并将其写入文件？

【英文标题】：How to access remote data and write it into a file during Nuxt build?

【发布时间】：2021-08-13 15:18:03

【问题描述】：

我是 Nuxt JS 的新手。并且正在尝试弄清楚如何从远程 URL 源下载 JSON 文件以在本地使用作为 nuxt 构建过程的一部分？

因此，例如，如果 JSON 文件位于：

https://path/to/my/json

然后在我的 nuxt 应用程序中，我不想远程连接到该 JSON 文件，而是在本地使用它。因此，当我发布我的网站时，我不希望它依赖于外部资源。

目前，我正在使用 gulp-download-files 插件通过 gulp 完成此操作。

【问题讨论】：

可以下载文件放到你的项目本地吗？

是的，但我不想手动执行此操作。特别是因为这意味着每次 JSON 文件更改时，我都必须记住再次手动下载文件。将此步骤自动化到构建过程中似乎是更明智的解决方案

但是，您告诉我们您不想下载它，对吧？我的意思是，使用远程文件和下载它以在本地使用它有什么区别？如果它在构建时不可用，您也无法在本地拥有它。无法下载 (axios) 或者不知道如何在本地写入 JSON (node's fs)？因为您可以通过获取文件（在构建时）将 JSON 本身完全注入到构建步骤中。

Re：“因为您可以通过获取文件（在构建时）将 JSON 本身完全注入构建步骤”：这就是我想要做的。我不知道如何/在哪里编写节点 js 来获取 JSON。这有意义吗？

【参考方案1】：

您可以从安装axios 开始（您仍然可以在项目旁边安装@nuxtjs/axios）：yarn add -D axios

那么，我们以JSON placeholder's API为测试目的，我们将尝试获取位于此处的内容：https://jsonplaceholder.typicode.com/todos/1 并将其保存到我们 Nuxt 项目中的本地 .json 文件中。

为此，前往nuxt.config.js 并在那里编写您的脚本

import fs from 'fs'
import axios from 'axios'

axios('https://jsonplaceholder.typicode.com/todos/1').then((response) => 
  fs.writeFile('todos_1.json', JSON.stringify(response.data, null, 2), 'utf-8', (err) => 
    if (err) return console.log('An error happened', err)
    console.log('File fetched from JSON Placeholder and written locally!')
  )
)

export default 
  target: 'static',
  s-s-r: false,
  // your usual nuxt.config.js file...

这将为您提供一个不错的 JSON 文件，然后您可以将其导入您的 nuxt.config.js 并继续工作！