前言
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
- step5: 接着你就可以在
http://localhost:9527/api
看到你的数据了,注意:这里的’api’字符串和9527端口是上面第二步的时候设置的。这里可能看到页面显示给你的是一个空对象。
- step6: 那么刚才的数据去哪了呢?可以在
http://localhost:9527/api/user
里得到。 - step7: 设置代理,在config文件夹下面的index.js文件里输入这些代码,到这个位置:
- step6: 那么刚才的数据去哪了呢?可以在
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在本地模拟请求数据/