vue-cli3中使用express配置本地数据接口

vue-cli3中使用express配置本地数据接口

写在前面1：看了一位大佬的，搬到了CSDN中，原文参考地址链接请点击这里
如有侵权，请联系删除，谢谢!
写在前面2:用vue-cli3构建基础时候，需要用到express配置本地的接口数据，vue-cli2配置的时候在build文件中的webpack.dev.config.js中进行配置.

1.在项目的根目录中增加mock.js文件，该文件作用的是关于express配置本地服务，代码如下

const express = require('express')
const app = express()
const apiData = require('./data.json')
const seller = apiData.seller
const goods = apiData.goods
const ratings = apiData.ratings
const apiRouters = express.Router()
//使用express路由获得本地数据
apiRouters.get('/sellers',(req,res) => {
    res.json({
        stu: 0,
        data: seller
    })
})
apiRouters.get('/goods',(req,res) => {
    res.json({
        stu: 0,
        data: goods
    })
})
apiRouters.get('/ratings',(req,res) => {
    res.json({
        stu: 0,
        data: ratings
    })
})
app.use('/',apiRouters)
app.listen(8081,()=>{
    console.log('mock data is running...');
})

2.在vue.config.js中配置webpack

//webpack自定义配置，配置获取本地数据接口，使用proxy解决数据接口的跨域问题
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            config.mode = 'production'
        } else {
            config.mode = 'development'
            require('./mock')
            config.devServer = {
                proxy:{//使用proxy解决跨域问题
                    '/api': {// 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
                        target: 'http://localhost:8081',
                        changeOrigin: true,
                        pathRewrite: {// 路径重写
                            '^/api': '/' // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
                        }
                    }
                }              
            }
        }
    }

在api目录中定义获得本地数据的数据接口，目录如下图所示

3.config.js文件时关于公共变量的定义，封装方法，以使用axios或的数据

export const ERR_OK = 0
import axios from 'axios'
let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
   baseUrl = process.env.VUE_APP_API
} else if(process.env.NODE_ENV === 'porduction'){
   baseUrl = process.env.production.BASE_URL
}
//将获得的数据接口封装为axios,便于使用promise
export function get(url){
   return function(params = {}){
       return axios.get(baseUrl + url,{
           params
       }).then(res => {
           const {stu,data} = res.data
           if(stu === ERR_OK){
               return data
           }
       }).catch( e =>{
       })
   }
}

index.js文件时获取数据的接口，在组件中使用

import {get} from './config'
const getSellers = get('/sellers')
const getGoods = get('/goods')
const getRatings = get('/ratings')
export {
    getSellers,
    getGoods,
    getRatings
}