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

To replace Mock.js with a real backend in vue-element-admin, disable the before hook in vue.config.js, add a proxy configuration to forward API calls, remove the mockXHR() import from 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, the devServer.before hook mounts a local Express server (line 39) that intercepts requests before they leave the browser. Additionally, 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. Comment out or remove this line to prevent Mock.js from starting when you run npm run dev.

// 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 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.

// 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 (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, the production build conditionally executes mockXHR() to enable offline demos. Remove or comment out this block to ensure production builds call the real API:

// 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 reads VUE_APP_BASE_API to determine the API root. Update your environment files to point to the real backend:

Development (.env.development):

# .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.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:

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

// 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 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 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 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. 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}