vue3.0引入mock(webpack-mock-server)

webpack-mock-server引入

1 安装

 npm install --save-dev webpack-mock-server typescript

2 引用(在vue.config.js中引入)

entry为对应的mock接口文件路径，如果不声明入口文件，则需要在根目录下声明webpakc.mock.ts vue.config.js

const webpackMockServer = require('webpack-mock-server')
devServer: {
    port: port,
    open: false,
    overlay: {
      warnings: false,
      errors: false
    },
    proxy: {
      '/api': {
        target: BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    before: (app) => {
      webpackMockServer.use(app, {
        // MockServerOptions here
        entry: {
          'mock/index.ts'
        ]
      })
    }
  },

mock/index.ts

import webpackMockServer from 'webpack-mock-server'

export default webpackMockServer.add((app, helper) => {
  app.get('/getUserInfo', (_req, res) => {
    res.json([
      {
        id: helper.getRandomInt(1, 999),
        name: 'pen'
      }
    ])
  })
})

如果mock配置成功了，在启动服务之后cmd页面会输出

WebpackMockServer. Started at http://localhost:8079/

完成以上步骤，就可以在页面里面使用http请求mock服务了。因为mock服务跟前端服务不是同一个端口，所以需要用到代理来请求，所以记得要配置下proxy里面的请求路径

如果对你有用处，麻烦点个小心心哦。谢谢