@vue/cli4(包括3)项目axios请求获取本地json文件数据

分手后的思念是犯贱 2023-07-09 04:24 2阅读 0赞

在前端开发过程中，当后台服务器开发数据还没完善，无法与我们交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。  
vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的`static`文件夹下创建`json`文件，vuecli3、4没有`static`文件夹了，那咋办？有人说我创一个`static`文件夹在下面继续写`json`文件不就行了。但结果会报错，请求404找不到文件。  
  
**1. @vue/cli已经默认将静态文件改存在public文件夹下了。**  
`static`文件夹在配置中已经识别不出了。我们在`public`文件夹下编写`json`文件作为模拟数据：  
![在这里插入图片描述][20200227211956302.png]  
**2. 项目安装axios，导入axios，创建get()异步请求：**  
![在这里插入图片描述][20200227212736801.png]  
这里可能会有朋友疑问了，诶？请求路径不应该是`'public/data/xx.json'`吗？注意了如果路径这样写反而会报错404找不到。

**3. 转发api路径代理设置。**  
开发情况下我们像上面这样改写路径其实是不合理的，默认我们将相对路径写为`'/api/xxx'`，那如何将`/api`指向实际的数据文件路径，实现转发？旧版本下我们会在`vue.config.js`下配置`proxy`属性，但新版本这个js文件已经不在目录下了，我们需要手动创建。

//在根目录下创建vue.config.js,如下配置：
    module.exports = { 
        devServer: { 
          proxy: {   
            '/api': { 
              target: 'http://localhost:8080', //路径指向本地主机地址及端口号
              ws: true, 
              changeOrigin: true,
              pathRewrite:{ 
                  '^/api': '/data' //路径转发代理
              }
            }
          }
        }
      }

**4. 将axios请求路径更改为/api。**  
![在这里插入图片描述][20200227220342857.png]  
做完以上步骤和避开雷区，已经可以成功在vuecli3、4版本项目上请求到本地json文件的数据了。等到和后台对接时，只要和后台工作人员确认好数据所在的主机地址端口号和存放路径，更改`vue.config.js`文件配置即可。

[20200227211956302.png]: https://img-blog.csdnimg.cn/20200227211956302.png
[20200227212736801.png]: https://img-blog.csdnimg.cn/20200227212736801.png
[20200227220342857.png]: https://img-blog.csdnimg.cn/20200227220342857.png