# How to Integrate a Real Backend API Replacing Mock.js in vue-element-admin

> Replace Mock.js with a real backend API in vue-element-admin. Learn how to configure proxy settings, update API endpoints, and disable mock services for seamless development and production integration.

- Repository: [花裤衩/vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
- Tags: tutorial
- Published: 2026-02-27

---

**To replace Mock.js with a real backend in vue-element-admin, disable the `before` hook in [`vue.config.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/vue.config.js), add a `proxy` configuration to forward API calls, remove the `mockXHR()` import from [`src/main.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/main.js) for production builds, and update `VUE_APP_BASE_API` in your environment files to point to your real API endpoint.**

The `vue-element-admin` template by PanJiaChen ships with a built-in Mock.js server that intercepts HTTP requests during development and can even inject mocks in production. While this accelerates frontend prototyping, production deployments require integration with a real backend API. This guide walks through the exact steps to disable Mock.js and configure the project to communicate with live servers in both development and production environments.

## Why vue-element-admin Uses Mock.js by Default

Mock.js is pre-configured to provide immediate API responses without a running backend. In [`vue.config.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/vue.config.js), the `devServer.before` hook mounts a local Express server (line 39) that intercepts requests before they leave the browser. Additionally, [`src/main.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/main.js) conditionally imports `mockXHR()` when `process.env.NODE_ENV === 'production'` (lines 31-34), allowing the built application to run entirely offline. To integrate a real backend API, you must disable both mechanisms.

## Step 1: Disable the Mock Server in Development

The mock server is mounted via the `before` hook in [`vue.config.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/vue.config.js). Comment out or remove this line to prevent Mock.js from starting when you run `npm run dev`.

```javascript
// vue.config.js
devServer: {
  port,
  open: true,
  overlay: { warnings: false, errors: true },
  // before: require('./mock/mock-server.js')   // ← disable mock server
},

```

With this line removed, the development server will no longer intercept API calls, allowing them to reach your configured proxy or fail until you configure the proxy in the next step.

## Step 2: Configure the Dev Server Proxy for Real API Calls

Add a `proxy` configuration under `devServer` in [`vue.config.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/vue.config.js) to forward requests to your real backend. The proxy uses `VUE_APP_BASE_API` (which defaults to `/dev-api`) to match request paths and rewrites them before forwarding.

```javascript
// vue.config.js
devServer: {
  port,
  open: true,
  overlay: { warnings: false, errors: true },
  // before: require('./mock/mock-server.js'),
  proxy: {
    [process.env.VUE_APP_BASE_API]: {
      target: 'https://api.mycompany.com',   // ← your real backend host
      changeOrigin: true,
      pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } // drop prefix
    }
  }
},

```

Now, when [`src/utils/request.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/utils/request.js) (line 8) creates an Axios instance with `baseURL: process.env.VUE_APP_BASE_API`, calls like `request.get('/vue-element-admin/user/info')` are proxied to `https://api.mycompany.com/vue-element-admin/user/info`.

## Step 3: Remove Production Mock Injection

In [`src/main.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/main.js), the production build conditionally executes `mockXHR()` to enable offline demos. Remove or comment out this block to ensure production builds call the real API:

```javascript
// src/main.js
if (process.env.NODE_ENV === 'production') {
  // Mock disabled for production – uncomment below to re-enable
  // const { mockXHR } = require('../mock')
  // mockXHR()
}

```

Without this code, the production bundle will not import the mock server, and all HTTP requests will travel to the endpoint defined by `VUE_APP_BASE_API`.

## Step 4: Set Environment Variables for Each Environment

The Axios wrapper in [`src/utils/request.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/utils/request.js) reads `VUE_APP_BASE_API` to determine the API root. Update your environment files to point to the real backend:

**Development** (`.env.development`):

```env

# .env.development

VUE_APP_BASE_API = '/dev-api'

```

When using the proxy configured in Step 2, keeping `/dev-api` ensures the dev server matches and rewrites the path correctly.

**Production** (`.env.production`):

```env

# .env.production

VUE_APP_BASE_API = 'https://api.mycompany.com'

```

Setting the full URL here ensures the production build communicates directly with your backend without requiring a proxy.

## Optional: Toggle Mocks with Environment Flags

If you need to occasionally re-enable Mock.js for local UI testing without editing source code, introduce a custom environment variable `VUE_APP_USE_MOCK`:

```javascript
// vue.config.js
if (process.env.VUE_APP_USE_MOCK === 'true') {
  devServer.before = require('./mock/mock-server.js')
}

```

```javascript
// src/main.js
if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_USE_MOCK === 'true') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

```

Now you can enable mocks by adding `VUE_APP_USE_MOCK=true` to any `.env` file, keeping the integration reversible.

## Summary

- **Disable the mock hook**: Comment out `before: require('./mock/mock-server.js')` in [`vue.config.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/vue.config.js) to stop the dev server from intercepting requests.
- **Configure proxy**: Add a `proxy` entry in `devServer` to forward `VUE_APP_BASE_API` paths to your real backend, rewriting the prefix as needed.
- **Remove production mocks**: Delete or guard the `mockXHR()` import in [`src/main.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/main.js) so production builds call live APIs.
- **Update environment variables**: Set `VUE_APP_BASE_API` in `.env.development` (for proxy matching) and `.env.production` (for direct API calls) to point to your backend host.

## Frequently Asked Questions

### How do I keep Mock.js for some routes while using a real backend for others?

The mock server in [`mock/mock-server.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/mock/mock-server.js) intercepts requests before they reach the proxy. You can modify the mock server logic to pass through specific paths by checking the request URL and calling `next()` instead of responding with mock data. Alternatively, disable the mock server entirely and use the dev server proxy to route different path prefixes to different backend services.

### Why are my API calls still going to Mock.js after editing vue.config.js?

Ensure you have fully restarted the development server after modifying [`vue.config.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/vue.config.js). Hot Module Replacement does not pick up changes to the webpack dev server configuration. Run `npm run dev` (or `npm run serve`) again to apply the new proxy settings and confirm the `before` hook is commented out.

### Can I use different API endpoints for development and production without changing code?

Yes. The project uses environment files (`.env.development` and `.env.production`) to set `VUE_APP_BASE_API`. Keep the development value as `/dev-api` to leverage the proxy, and set the production value to your full API URL (e.g., `https://api.production.com`). The Axios instance in [`src/utils/request.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/utils/request.js) automatically picks up the correct value for each environment.

### Is it safe to delete the mock directory after migrating to a real backend?

While safe, it is recommended to keep the `mock/` directory in version control but disable its execution via the configuration steps above. This preserves the ability to run the application offline for quick UI demos or when the backend is unavailable. If you are certain you will never need mocks again, you can delete the directory and remove any conditional imports referencing it.