Vue2.0下使用json-server （dev-server失踪解决方法）

前言

vue-cli(版本更新)，由原来的2.8.1升级为2.9.1。主要改变是原来在build文件夹下的dev-server.js删掉了，增加了webpack.dev.conf.js。

-　很多的文章都是要修改dev-server文件内容的，如：Vue-cli-使用json-server在本地模拟请求数据
- 但是我根本找不到这个文件！
- 在网站找了很多方法，要么就是都比较复杂，对于vue小白有点难度，如：Vue2.0史上最全入坑教程(续)—dev-server失踪问题解答
- 要么就是要用npm启动vue项目，然后再用npm启动json-server
- 我只想一次启动，而且想要我的代码结构变化尽量少，于是有了下面的方法：

解决方案：

step1: 在你喜欢的地方建立一个文件db.json，填入一些数据：

{
  "user": {
    "name": "charming"
  }
}

step2: 直接再build文件夹下面的webpack.dev.conf加入以下内容，至于加在什么位置没有要求，不混淆就行，建议直接放在最底下

var jsonServer = require('json-server') //引入文件
var apiServer = jsonServer.create(); //创建服务器
var apiRouter = jsonServer.router('static/mock/db.json') //引入json 文件 ，这里的地址就是你json文件的地址，我再static下的建立了一个文件夹mock，然后把json文件放在里面
var middlewares = jsonServer.defaults(); //返回JSON服务器使用的中间件。
apiServer.use(middlewares)
apiServer.use('/api',apiRouter)
apiServer.listen( 9527 ,function(){ //json服务器端口:9527
  console.log('JSON Server is running')  //json server成功运行会在git bash里面打印出'JSON Server is running'
})

step3: 在你项目的根目录下的package.json文件里面的增加依赖，也就是把下面这些代码，放在下面这个位置：

"json-server": "^0.9.6",
    "nodemon": "^1.11.0"

这里写图片描述

step4: 然后npm install一下，接着启动vue项目npm run dev
step５: 接着你就可以在http://localhost:9527/api看到你的数据了，注意：这里的’api’字符串和9527端口是上面第二步的时候设置的。这里可能看到页面显示给你的是一个空对象。
- step6: 那么刚才的数据去哪了呢？可以在http://localhost:9527/api/user里得到。
- step7: 设置代理，在config文件夹下面的index.js文件里输入这些代码，到这个位置：

proxyTable: {
      '/api':{
          target: 'http://localhost:9527',
          pathRewrite: {
              '^/api': '/api'
          }
      }
    },

这里写图片描述
- step8: 安装axios:npm install axios --save
- step9: 在组建中怎么使用呢？

首先再组件里引入axios import axios from 'axios'
然后通过下面方法就可以获得数据了

axios.get('api/user').then((res) => {
        console.log(res, '请求成功')
      }, (err) => {
        console.log(err, '请求失败')
      })

step10：也可以把axios挂着到全局的vue上，这里不做解释。
还有什么疑问的可以评论我，或者加我qq：820327571

其实简单说就是把webpack.dev.conf.js文件，当成是dev-server来操作就行了
Vue-cli-使用json-server在本地模拟请求数据/

Vue2.0下使用json-server （dev-server失踪解决方法）

前言

解决方案：

猜你喜欢