vue-cli加载本地json的方法

目前在学习vue-cli，加载json数据是我目前最上心的事，所以总结一下加载json数据的方法。（我是新手，内容多有借鉴，有错误希望指正）

（1）新建一个json文件，保存位置如下：

               

         不用好奇，确实是两个位置，我想做的是分别获取外部与static静态文件夹中两种。

（2）咱们先说第一个，不是因为他排在第一个，而是因为他最废我精力，后来答案还特别简单，效果贴上。

哈哈，没错是404，因为根本就无法获取（笑哭），我弄了好久，谁如果弄出来了麻烦教我一下，多谢。

（3）咱们言归正传，看第二个static静态文件里的json读取。

    先上一个效果图（控制台打印的数据），给各位定下心，数据是我自己创建的假数据。

    

具体代码在不同的文件，所以不能一把截图过来，会分几个部分，步骤如下：

     1.在webpack.dev.conf.js（之前是dev-server.js，新版本之后替换为这个文件，具体内容自行百度）文件中，红框内是我添加的，注释的部分是第一种方法的代码（失败了），有兴趣的话可以尝试。

// 加载本地json 10-22
var appData = require('../roles.json')
var roles = appData.roles;

/*const express = require('express')
var app = express()
var apiRoutes = express.Router();
apiRoutes.get('/roles01',function (req,res) {
  res.json({
    errno:0,
    data:roles
  });
});
apiRoutes.post('/roles01',function (req,res) {
  res.json({
    errno:0,
    data:roles
  });
});
app.use('/api',apiRoutes);*/

// end

   2.此时需要引入两个插件，一个是axios（用于请求），另一个是jquery（用于jquery方式请求，可不加）

       npm install axios --save-dev 与 npm install jquery --save-dev

在src文件夹下的router文件夹下的main.js内添加如下：

import axios from 'axios'
import 'jquery'

Vue.config.productionTip = false
Vue.prototype.$http = axios

同上，红框内是添加的，引用全局jquery的话略麻烦，需要在webpack.basc.conf.js内添加如下内容：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ],

依然同上。

  这时，配置已经完成，剩下的就是在页面内添加访问（切记此时要重新npm run dev一下），下面是我写的调取数据的事件，有些简陋。第二种方法也测过服务接口，可以用。

帖子不精，至少证明自己努力了。古之成大事者，不唯有超世之才，亦必有坚韧不拔之志。（安慰一下自己）