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)
})
结果如下