關於項目接口地址失效，簡單的解決辦法：本身建立本地JSON數據

關於vue項目接口失效，簡單的解決辦法-本身搭建本地JSON數據

寫在前面，系本人學識淺薄，懂得很少，寫博客目的是能幫助小白解決問題就OK，若有操做不當，望見諒。

當咱們在使用 vue 作些好比電影，商城類項目的時候，常常遇到接口地址失效，沒法訪問的問題，就會阻礙咱們作項目的進程。
我這裏給小白，也算溫習下，利用簡單有效的辦法，本身搭建一個請求接口。
首先我以電影影院接口爲例，json 數據以下：
(很好用的插件：JSON-handle)

此時接口失效了，該怎麼作呢？
首先，咱們將須要的 json 數據複製，在項目根目錄下新建一個 coming.json 文件，粘貼進去保存（若沒有去網上搜個修改下也能夠）。
需求代碼請求的接口地址以下：

以後在根目錄下新建一個 vue.config.js 文件用來寫相關配置（至於爲何不是 build : 新版本沒有 build 文件夾，相關請自行查閱）。

話很少說直接代碼走起來：
先下載並引入須要的模塊

const express = require('express')
const app = express()`

var apiRoutes = express.Router() /* 定義express.Router() 對象 */
app.use('/api', apiRoutes) /* 定義接口在/api 地址下 */

var appComing = require('./coming.json') //引入 json 數據並賦值
var comingList = appComing.coming /* coming.json文件文件下的 coming 數據賦值給變量 comingList */
apiRoutes.get('/coming', function(req, res) {  /* 定義接口並返回數據 */
    res.json({ 
        data: comingList  //上面被賦值的數據名
    })
})

//vue devServer 配置
module.exports = { 
    devServer: { 
        proxy: {   //代理
            '/api': { 
                target: 'http://localhost:8080',
                changeOrigin: true
            }
        },
		app.get('/api/coming', (req, res) => { 
                res.json({ 
                    code: 200,
                    data: comingList   //和上面的 data 一致
                })
            }); 
     	}
   }
}

還須要下載 vue-resource
(vue 實現異步加載須要用到 vue-resource ，是vue中使用的請求網絡數據依賴於vue的插件，用來調接口)
運行

npm install --save vue-resource

安裝 vue-resource

在 main.js 導入並使用 ：

import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false  //消除控制檯消息

好了，啓動項目，瀏覽器搜索
http://127.0.0.1:8080/api/coming
便可查看要請求的接口數據。

這樣就配置好相關接口請求設置，以上配置項所涉及知識以及是否可行，且能知足簡單需求，請讀者手動搜索和嘗試。