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

这篇具有很好参考价值的文章主要介绍了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) {
      // 在服务器启动之后执行自定义代码
    }
  }
};