vue全家桶进阶之路48：Vue3 跨域配置devServer的参数和设置

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。这个示例仅仅是一个起点，您可以根据自己的需求进行修改和扩展。