目前在学习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一下），下面是我写的调取数据的事件，有些简陋。第二种方法也测过服务接口，可以用。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/jiangtao">出门</router-link>
    <button @click="dataRoles">获取数据</button>
    <button @click="dataRoles01">获取数据01</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '听说大壮家结婚，我去瞅瞅'
    }
  },
  methods:{
    dataRoles(){
      var url = 'http://localhost:8080/static/roles.json';
      this.$http.get(url).then(res =>{
        console.log(res)
      })
       /*$.get(url,function(data){
          console.log(data)
       })*/
    },
    dataRoles01(){
      var url01 = 'http://localhost:8080/api/roles01';
      this.$http.get(url01).then(res =>{
        console.log(res)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

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