#tools.devServer

• Type: Object
• Default: {}

The config of DevServer can be modified through tools.devServer.

#Options

#compress

• Type: boolean
• Default: true

Whether to enable gzip compression for served static assets.

If you want to disable the gzip compression, you can set compress to false:

export default {
  tools: {
    devServer: {
      compress: false,
    },
  },
};

#headers

• Type: Record<string, string>
• Default: undefined

Adds headers to all responses.

export default {
  tools: {
    devServer: {
      headers: {
        'X-Custom-Foo': 'bar',
      },
    },
  },
};

#historyApiFallback

• Type: boolean | ConnectHistoryApiFallbackOptions
• Default: false

The index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true:

export default {
  tools: {
    devServer: {
      historyApiFallback: true,
    },
  },
};

For more options and information, see the connect-history-api-fallback documentation.

#proxy

• Type: Record<string, string> | Record<string, ProxyDetail>
• Default: undefined

Proxying some URLs.

export default {
  tools: {
    devServer: {
      proxy: {
        '/api': 'http://localhost:3000',
      },
    },
  },
};

A request to /api/users will now proxy the request to http://localhost:3000/api/users.

If you don't want /api to be passed along, we need to rewrite the path:

export default {
  tools: {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          pathRewrite: { '^/api': '' },
        },
      },
    },
  },
};

The DevServer Proxy makes use of the http-proxy-middleware package. Check out its documentation for more advanced usages.

The full type definition of DevServer Proxy is:

import type { Options as HttpProxyOptions } from 'http-proxy-middleware';

type Filter = string | string[] | ((pathname: string, req: Request) => boolean);

type ProxyDetail = HttpProxyOptions & {
  bypass?: (
    req: IncomingMessage,
    res: ServerResponse,
    proxyOptions: ProxyOptions,
  ) => string | undefined | null | false;
  context?: Filter;
};

type ProxyOptions =
  | Record<string, string>
  | Record<string, ProxyDetail>
  | ProxyDetail[]
  | ProxyDetail;

In addition to the http-proxy-middleware options, two configuration items are also supported: bypass and context:

• bypass: Bypass the proxy based on the return value of the function.
  • Returning null or undefined will continue to process the request with proxy.
  • Returning false will return a 404 error.
  • Returning a specific service path will use this path to replace the original request path.
• context: If you want to proxy multiple specific paths to the same target, you can use the context configuration item.

// Custom bypass method
export default {
  tools: {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          bypass: function (req, res, proxyOptions) {
            if (req.headers.accept.indexOf('html') !== -1) {
              console.log('Skipping proxy for browser request.');
              return '/index.html';
            }
          },
        },
      },
    },
  },
};

// Proxy multiple paths to the same target
export default {
  tools: {
    devServer: {
      proxy: [
        {
          context: ['/auth', '/api'],
          target: 'http://localhost:3000',
        },
      ],
    },
  },
};

#watch

• Type: boolean
• Default: true

Whether to watch files change in directories such as mock/, server/, api/.