怎么给vue项目加mock server

在Vue项目中，可以使用mockjs来模拟一个本地的mock server，下面是具体步骤：

1. 安装mockjs

在终端中运行以下命令：

npm install mockjs --save-dev

2. 创建mock数据

在项目根目录下创建一个名为mock的文件夹，然后在该文件夹下创建一个名为mock.js的文件，并编写 mock 数据。

例如，可以创建一个mock数据文件 src/mock/mock.js，然后编写以下代码：

import Mock from 'mockjs'

Mock.mock('/api/user', 'get', {
  username: 'admin',
  password: '123456'
})

3. 配置webpack

在项目根目录下创建vue.config.js文件，添加以下代码：

const path = require('path')
module.exports = {
  devServer: {
    before(app) {
      app.get('/api/user', (req, res) => {
        res.json({
          code: 200,
          data: {
            username: 'admin',
            password: '123456'
          }
        })
      })
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

这样就配置好了mock server，访问 http://localhost:8080/api/user 就可以获取到mock数据了。

4. 在Vue组件中使用mock数据

在Vue组件中通过axios进行异步请求，例如：

import axios from 'axios'

axios.get('/api/user').then(res => {
  console.log(res.data)
})

这样就可以在Vue项目中使用mock数据了。