如何在 Vue 中加载本地 json 文件？答案

【问题标题】：How to load local json file in Vue?如何在 Vue 中加载本地 json 文件？
【发布时间】：2020-04-29 08:32:27
【问题描述】：

我一直在尝试从本地 json 文件加载数据。我只想从 json 文件加载数据并将其分配给一个变量。我正在尝试在 Vue 中执行此操作。它可能是示例或我我在做完全错误的事情。如果我的问题有问题，请告诉我。

提前致谢。

我的js文件：

import json from './ecommerce-products.json';

 var vm=new Vue({
     el:'#container',
     data(){
         return {
             items:json
         }
     }
})

【问题讨论】：

a local json file - 那么，在服务器上？文件存在吗？您在浏览器开发人员工具控制台中看到了哪些错误？哦，等等，你不能导入 json 文件 - 因为 json 文件不会导出任何东西......在浏览器中导入/导出仅适用于 javascript
@JaromandaX 你可以导入一个 json 文件。这是完全有效的。它基本上是一个对象。我不认为他有任何错误......他的代码应该是这样的。
@JamesTotty 或 Chrome 中的Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec. ...所以，我不知道您使用的是哪个浏览器
@JamesTotty - 你在浏览器中成功使用了@import json from 'somefile.json'，对吧，在发表评论之前？
@JaromandaX 我是预编译的。

标签： javascript json vue.js

【解决方案1】：

如果你使用vuecli，将json文件放在'public'目录下，那么你可以使用 'axios' 来获取它们。这个.$axios({ 方法：'get'，网址：'json/test.json' }).then(res =>{ this.data=res.data })

【讨论】：

我没有使用 vuecli。