vue模拟本地请求数据
最简便的一种方法就是把模拟的json文件放到static目录下(用了vue-webpack-template)。webpack的devserver默认把项目根目录作为本地入口,所以URL写成响应路径就行(eg. 'static/XXX.json')。除了static以外的别的目录我试了一下并不能用。早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地..
最简便的一种方法就是把模拟的json文件放到static目录下(用了vue-webpack-template)。webpack的devserver默认把项目根目录作为本地入口,所以URL写成响应路径就行(eg. 'static/XXX.json')。除了static以外的别的目录我试了一下并不能用。
早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。
新版webpack.dev.conf.js配置本地数据访问:
在const portfinder = require(‘portfinder’)后添加
//首先
const express = require('express')
const app = express()
var data = require('../static/data.json')//加载本地数据文件
//const router = express.Router() //后面用router.get('/test',fun)没办法获取到
//然后找到devServer,在里面添加
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: data
})
}),
//app.use('/api', apiRoutes) //该改的地方我应该都改了。。。也有放到before里面试,不会额
axios可以正常获取。
但是我在对自己本身的data进行设置的时候,
错误的写法:
因为用了function,所以上下文发生了变化this并不指向vue的实例,所以改为箭头函数(完美暴露我基础差,不会ES6的事实)
axios({
method: 'get',
url: '/api/test'
}).then((res)=>{
this.projects=res.data.projects;
}).catch(function (err) {
console.log(err);
});
在看webpack-dev-server配置的时候发现可以这么做,设置代理。适用于你本地别的端口跑了个服务器,比如说node。
devServer:{
//......别的配置参数
proxy: { "/api": "http://localhost:3000"}
}
更多推荐
所有评论(0)