关于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
即可查看要请求的接口数据。

这样就配置好相关接口请求设置，以上配置项所涉及知识以及是否可行，且能满足简单需求，请读者手动搜索和尝试。