vue模拟本地请求数据（非mock形式）

转载自https://blog.csdn.net/qq_34452281/article/details/80521989

最简便的一种方法就是把模拟的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"}
}