VUE(版本v2.5)模拟POST本地json的方法

最近在学习vue项目开发，由于纯练手没有开发后端，只能用本地模拟数据进行。
找了网上的一些 json mock 方法，发现 get 请求可以通过 proxyTable 进行模拟，但是 post 请求就会报404错误。

get 请求的配置可以用这个方法：

在根目录新建 static/mock/ 文件夹，将模拟数据 *.json 放在目录里；

修改 config/index.js 文件，增加proxyTable配置

proxyTable: {
    // 数据代理，将所有 api/get 开头的请求转发给本地mock目录
    '/api/get': {
        target: 'http://localhost:8080/static/mock',
        pathRewrite: {
          '^/api/get': ''
        }
    }
}

这时候请求get就能访问到json文件（我项目中用了 axios ）：

1 2	// 会转发请求到 http://localhost:8080/static/mock/user.json axios.get('api/get/user.json')

在网上找了一些文章，有写配置的也是比较旧版本的vuejs，新版本的配置文件不太一样了。
看了下 webpack devserver 的文档，里面有个属性 devServer.before 似乎可以实现mock。
然后研究了下项目结构，发现devserver使用的配置是 build/webpack.dev.conf.js，而这个配置文件只使用了 config/index.js 中的部分配置，所以要使用 devServer.before 这个属性必须要修改 build/webpack.dev.conf.js 文件：

// 在devServer的属性中添加
// ...其他属性
before (app) {
    app.post('/api/post/login', function (req, res) {
        // 这里也可以用import一个数据文件，但修改文件内容时也需要重启server才能生效
        res.json({
            status: 'ok',
            data: {}
        })
    })
},
// ...其他属性

重启 server ，使用 post json生效

1	axios.post('api/post/login', {username: 'username', password: 'pwd123'});

Virola's Blog

For love & freedom. 爱与自由。

VUE(版本v2.5)模拟POST本地json的方法