vue-cli3本地mock本地测试数据

使用vue-cli 3,在本地vue项目,新建mock文件夹,存放测试数据,通过axios访问。

步骤:

1、配置vue.config.js文件

module.exports = {

      devServer: {

             proxy: {

                  '/api': {

           target: 'http://localhost:8080',                

                       changeOrigin: true,

                        pathRewrite: {

                                       '^/api': '/mock'     

                                          }

                                }

                          }

                   }

}

2、.vue文件访问

import axios from 'axios';

  export default {

             data(){

                     this.$axios.get('@/mock/data.json').then(res=>{

                                         console.log(res)

                         })

               }

  }

3、浏览器访问: http://localhost:8080/mock/data.json


浏览器查看本地json数据

参考资料:

      1、vue官方文档:vue-cli配置参考

      2、vue-cli 3 无法访问本地mock测试数据

你可能感兴趣的:(vue-cli3本地mock本地测试数据)