What is the method for configuring devServer parameters across domains in Vue3?

devServer is an options object used to configure the development server. It can be used to configure various options of the server, such as proxy, port number, HTTPS, etc.

The following are some commonly used devServer parameters and settings:

• port: Specify the port number of the development server, default For 8080.

• host: Specify the host name of the development server, the default is localhost.

• https: To enable HTTPS, you can pass in a Object type parameter to configure HTTPS options.

• #open: Automatically open the browser, the default is false. You can pass in a String type parameter to specify the name of the browser.

• proxy: used to configure the proxy. You can pass in a parameter of type Object to configure proxy options.

• #hot: Enable hot reloading, the default is true.

• compress: Enable gzip compression.

• historyApiFallback: Enable HTML5 history mode routing. When the path accessed by the browser does not exist, the index.html file will be returned instead of the 404 page.

• publicPath: Specifies the public path of the resource, which can be a relative path or an absolute path.

• quiet: Disable all output information.

• clientLogLevel: Specifies the log level displayed in the browser console, the default is info.

• overlay: Display compilation errors in the browser.

• watchOptions: Options for configuring watch files.

• contentBase: Specify the directory of static files, which defaults to the project root directory.

• before and after: Execute custom code before or after the server starts.

The following is a configuration example of devServer:

// vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    host: 'localhost',
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    },
    hot: true,
    compress: true,
    historyApiFallback: true,
    publicPath: '/',
    quiet: true,
    clientLogLevel: 'warning',
    overlay: true,
    watchOptions: {
      poll: false
    },
    contentBase: './public',
    before: function(app) {
      // 在服务器启动之前执行自定义代码
    },
    after: function(app) {
      // 在服务器启动之后执行自定义代码
    }
  }
};

In this example, we made the following configuration:

• Set the port number of the development server to 8080.

• Set the hostname of the development server to localhost.

• Disable HTTPS.

• Automatically open the browser.

• Configure the proxy to proxy all requests starting with /api to http://localhost:3000.

• Enable hot reload.

• Enable gzip compression.

• Enable HTML5 historical mode routing.

• The public path of the specified resource is the root directory.

• Disable all output information.

• Set the log level to warning.

• Show compilation errors in the browser.

• Options for monitoring files are set to default values.

• Specify the directory of static files as ./public.

• Execute custom code before and after server startup.

You can configure devServer according to your needs. This example is just a starting point and can be modified and extended to suit your needs.

The above is the detailed content of What is the method for configuring devServer parameters across domains in Vue3?. For more information, please follow other related articles on the PHP Chinese website!