How to configure the devserver inside

Devserver configuration method

The following ismiddledevServerCommon configuration methods, as well as explanations and usage scenarios of different configuration items:

1. Basic configuration

In the Vue project,is an optional configuration file for customizing the internal Webpack configuration of the Vue CLI.

Here is a simple onedevServerConfiguration example:

 = {
  devServer: {
    port: 8080, // Port number of the development server    open: true, // The browser will be opened automatically when the project starts    overlay: {
      warnings: false,
      errors: true // Show error message in the browser    }
  }
};

explain：

• port: Specify the port number of the development server to run. If not set, the default is 8080.
• open: Set totrueWhen the project starts, the browser will automatically open and access the page of the development server.
• overlay: Controls whether to overwrite warnings and error messages on the browser page. WillerrorsSet astrueCompilation errors will be displayed on the page, which will facilitate quick positioning of problems during development.

2. Agent configuration

usedevServerConfiguring a proxy is a common method to solve cross-domain problems in development environments.

Assume that you need to/apiThe request at the beginning is proxyed tohttp://localhost:3000The backend server on it can be configured like this:

 = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // Target server address        changeOrigin: true, // Modify the Origin information in the request header        pathRewrite: {
          '^/api': '' // Rewrite the request path and replace /api with empty        }
      }
    }
  }
};

explain：

• proxy: Set up a request proxy.
• '/api': Match with/apiThe request path at the beginning.
• target: The destination server address to which the request will be proxyed.
• changeOrigin: Convert the request headerOriginModifying the field to the address of the target server helps to bypass the same-origin policy restrictions on some servers.
• pathRewrite: Rewrite the request path, here/apiRemove the prefix to make the request path conform to the actual situation of the backend API.

3. Thermal Module Replacement (HMR)

Enable hot module replacement can update the code without refreshing the page, improving the development experience:

 = {
  devServer: {
    hot: true, // Enable hot module replacement    hotOnly: true // Only use hot updates, no page refresh  }
};

explain：

• hot: Enable hot module replacement.
• hotOnly: When the hot module replacement fails, the page is not refreshed to avoid data loss or status reset caused by page refresh.

4. Static resource services

Can be configureddevServerTo handle static resource services:

 = {
  devServer: {
    contentBase: './public', // Directory of static resources    watchContentBase: true // Listen to changes in static resource directory  }
};

explain：

• contentBase: Specify the directory of the static resource, the default ispublicTable of contents.
• watchContentBase: Set totrueWhen the file in the static resource directory changes, the development server reloads.

5. Enable HTTPS

If you need to use HTTPS in your development environment, you can configure itdevServeras follows:

const fs = require('fs');
const path = require('path');

 = {
  devServer: {
    https: {
      key: ((__dirname, '')), // Private key file      cert: ((__dirname, '')) // Certificate file    }
  }
};

explain：

• https: To use the HTTPS protocol, you need to provide a private key and certificate file.

6. Configure multiple proxy

If you need to proxy different requests to different backend servers, you can use multiple proxy configurations:

 = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:3001',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:3002',
        changeOrigin: true
      }
    }
  }
};

7. Other configurations

Other configurations can also be configureddevServerOptions such asheadersUsed to set the response header,compressTo enable Gzip compression:

 = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*' // Allow cross-domain requests    },
    compress: true // Enable Gzip compression  }
};

Experience:

In-housedevServerThe configuration items are very flexible and can be customized according to development needs.

The following is a comprehensiveExample:

const fs = require('fs');
const path = require('path');

 = {
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    hot: true,
    hotOnly: true,
    contentBase: './public',
    watchContentBase: true,
    https: {
      key: ((__dirname, '')),
      cert: ((__dirname, ''))
    },
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    compress: true
  }
};

Summarize

The above ismiddledevServerYou can choose and modify the common configurations according to the actual needs of the project to meet different needs during the development process.

These are just personal experience. I hope you can give you a reference and I hope you can support me more.