28-JS中使用JSON

在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。有时候你也会从后台读取到一个json的文件， 比如站点配置项，I18n这类的功能需求。这里就介绍如何在webpack环境中使用Json。

危险

如果你会webpack1或者webpack2版本中，你是需要加载一个json-loader的loader进来的，但是在webpack3.x版本中，你不再需要另外引入了。

读出Json内容

声明一个标签

现在我们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中可以方便引用。

<div id="json"></div>

准备一个JSON

{
    "name": "123"
}

在JS中增加功能

添加如下JS代码测试

let json = require("./config.json");
document.getElementById("json").innerHTML= json.name;

这两行代码非常简单，第一行是引入我们的json文件，第二行驶写入到到DOM中。

总结

启用我们的npm run server 命令就可以在浏览器中看到结果了。