devServer 是一个用于配置开发服务器的选项对象。它可以用来配置服务器的各种选项，例如代理，端口号，HTTPS 等。
以下是一些常用的 devServer 参数和设置：
-
port：指定开发服务器的端口号，默认为8080。 -
host：指定开发服务器的主机名，默认为localhost。 -
https：开启 HTTPS，可以传入一个Object类型的参数，用于配置 HTTPS 选项。 -
open：自动打开浏览器，默认为false。可以传入一个String类型的参数，用于指定浏览器的名称。 -
proxy：用于配置代理。可以传入一个Object类型的参数，用于配置代理选项。 -
hot：启用热重载，默认为true。 -
compress：启用 gzip 压缩。 -
historyApiFallback：启用 HTML5 历史模式路由。当浏览器访问的路径不存在时，将返回index.html文件，而不是 404 页面。 -
publicPath：指定资源的公共路径，可以是一个相对路径或绝对路径。 -
quiet：禁用所有输出信息。 -
clientLogLevel：指定在浏览器控制台中显示的日志级别，默认为info。 -
overlay：在浏览器中显示编译错误。 -
watchOptions：用于配置监视文件的选项。 -
contentBase：指定静态文件的目录，默认为项目根目录。 -
before和after：在服务器启动之前或之后执行自定义代码。
下面是一个 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) { // 在服务器启动之后执行自定义代码 } } };
在这个示例中，我们做了以下配置：
- 将开发服务器的端口号设置为
8080。 - 将开发服务器的主机名设置为
localhost。 - 禁用 HTTPS。
- 自动打开浏览器。
- 配置代理，将所有以
/api开头的请求代理到http://localhost:3000。 - 启用热重载。
- 启用 gzip 压缩。
- 启用 HTML5 历史模式路由。
- 指定资源的公共路径为根目录。
- 禁用所有输出信息。
- 将日志级别设置为
warning。 - 在浏览器中显示编译错误。
- 监视文件的选项设置为默认值。
- 指定静态文件的目录为
./public。 - 在服务器启动之前和之后执行自定义代码。
您可以根据自己的需求来配置 devServer。这个示例仅仅是一个起点，您可以根据自己的需求进行修改和扩展。