vue cli工程中的本地数据接口

1、常规请求

使用Vue CLI新建的项目中,我需要使用本地数据进行测试,于是写了下面的数据请求:

      let url = '/src/assets/city.json'
      fetch(url).then(response => {
        return response.json()
      }).then(data => {
        console.log(data)
      })

npm run serve后,运行到这个请求后报错,报错如下:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
报语法错误,但我检查数据文件没问题的,并且上面的代码在非工程下是可以正常运行。于是尝试了以下方法:
1)尝试包数据文件放到其它目录下,还是包同样的错。
2)放到静态文件目录(我使用的是Vue CLI新版,初始化后没有static目录,新建了一个),同样报错。

经过一系列百度后,终于由了正确的解决方案。

2、解决方法

1)vue.config.js配置

Vue CLI 新建工程后,vue.config.js文件并不存在,可以在项目根目录下手动建立一个
在这里插入图片描述
vue.config.js中的配置,可以参考:https://cli.vuejs.org/zh/config/

言归正传,再来回到上面数据请求的问题

2)express框架

Express 是一个简洁而灵活的 node.js Web应用框架,这里需要利用这个框架的作为后台数据服务器。如果项目中没有安装,可以先npm安装下

npm install express

3)修改vue.config.js配置

首先,在文件头部,module.exports 之前添加以下内容

const express = require('express')
const app = express()
let appData = require('./assets/api/city.json')
let apiRoutes = express.Router()
app.use('/api', apiRoutes)

其中 appData是我们的本地数据,require后面的是数据文件路径city.json
为了方便管理接口,我在 /src/assets 目录下,新建一个api文件夹,然后把数据文件 city.json 放进去。
在这里插入图片描述
其次,修改devServer

    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, // 配置自动启动浏览器
    before (app) {
      // 数据接口
      app.get('/api/city', (rep, res) => {
        res.json({
          error: 0,
          result: appData	//对应文件开通的appData
        })
      })
    }

接口配置到此就可以了,然后在项目就中可以使用 /api/city 接口,请求city.json这个本地数据文件了

3、再次测试请求

    fetch('/api/city').then(response => {
      return response.json()
    }).then(data => {
      console.log(data)
    })

结果如下
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值