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

結果如下