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)
    })

结果如下