比较好用的两种vue-cli mock 数据配置

使用webpack vue-cli生成的目录，以及我配置的目录
配置dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: process.argv[2] === 'mock' ? '"mock"' : '"development"'
})

一、使用vue-cli自带的express
1.将axios挂在Vue的全局组件下
net/index.js

import axios from 'axios'
// 将axios挂在原型链上

axios.defaults.baseURL = process.env.NODE_ENV === 'mock' ? '/mock' : '/api'
console.log('process.env.NODE_ENV', process.env.NODE_ENV)

console.log(axios.defaults.baseURL)
export default {
  install(Vue) {
    Vue.prototype.$http = axios
  }
}

注：此处 process.env.NODE_ENV === 'mock' 表示使用easy-mock，下面会讲到，/api表示使用自带的express

在main.js里面挂载axios

import axiosPlugin from '../net'
Vue.use(axiosPlugin)

2. 复制dev-server.js ------> dev-server-mock.js
   在里面加入

// serve pure static assets
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

//以下为添加部分
// 启动mock数据
// '/api' => 来自于axios.defaults.baseURL= '/api'
app.all('/api/*', (req, res, next) => {
    var jsonPath = req.path;
    console.log(jsonPath)
    // 删除缓存
    delete require.cache[require.resolve(path.join(__dirname, '../mock/' + jsonPath.replace('/api', '')))];

    res.setHeader("Content-Type", "application/json;charset=utf-8");
    // 找到对应的mock下面的文件夹，并将其引入 写入res中  返回
    // 相当于用express做了一个服务
    res.write(JSON.stringify(require(path.join(__dirname, '../mock/' + jsonPath.replace('/api', '')))));
    res.end();
})

3.配置启动脚本 package.json

"mock": "node build/dev-server-mock.js",

4.写mock的json数据
在mock/one/文件夹下面
db.json

{
    "data": "success",
    "status": 200,
    "msg": "cms"
}

5.在组件里请求数据

created () {
        console.log(this.$http)
        this.$http({
            method: 'get',
            url: '/one/db',
            responseType: 'json'
        }).then(function (res) {
            console.log(res)
        })
    }

二、使用easy-mock
http://easy-mock.com/
创建一个项目，项目url

 http://easy-mock.com/mock/59fc3d6fa9ce1239805fd80e/deploy

新建一个接口地址：

2.配置proxyTable
在config/index.html

  dev: {
    env: require('./dev.env'),
    port: process.env.PORT || 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        // '/api': {
        //     target: 'http',
        //     changeOrigin: true
        // },
        '/mock': {
       // http://easy-mock.com/mock/59fc3d6fa9ce1239805fd80e/deploy/mock/one/db
            target: 'http://easy-mock.com/mock/59fc3d6fa9ce1239805fd80e/deploy',
            changeOrigin: true,
            pathRewrite: {
              '^/mock': '/'
            }
        }
    },

3.配置package.json脚本

"easy-mock": "node build/dev-server.js mock",