Nuxt项目中JSON数据存储：选.json还是.js文件？

选择建议 #

• 纯静态结构化数据（比如配置项、多语言文案、固定列表）优先用.json文件，语法规范，解析成本低。
• 需要动态处理、包含逻辑计算，或者要导出多个内容的场景，选.js文件，灵活性更强。

各自的注意事项 #

使用.json文件的注意点 #

• 严格遵守JSON语法：所有键名必须用双引号，不能加尾随逗号，不支持注释，字符串也只能用双引号，语法错误会导致导入失败。
• Nuxt中的导入方式：直接用import data from './your-data.json'即可，框架会自动完成JSON解析，不需要手动调用JSON.parse。
• 文件存放位置：公共静态数据可放在assets或static目录；组件/页面专属数据，直接放在对应组件目录下就行。
• 无逻辑支持：不能在文件里写变量、函数或计算逻辑，所有内容必须是纯静态的JSON结构。

使用.js文件的注意点 #

• 正确导出数据：推荐用ES模块语法export default { /* 你的数据 */ }，也支持CommonJS的module.exports = { ... }格式，Nuxt都能识别。
• 支持逻辑处理：可以在导出前对数据做动态计算，比如：

  const rawData = { name: 'test', count: 10 }
  rawData.total = rawData.count * 2
  export default rawData
  

• 打包优化：用ES模块导出时，Nuxt的打包工具会进行树摇，只打包实际用到的部分，减少体积；CommonJS格式无法享受这个优化。
• 可添加注释：JS文件里可以自由添加单行或多行注释，方便后续维护和说明数据含义。

内容的提问来源于stack exchange，提问作者Deny Kristianto Pamuji