首页 前端知识 vue.config.js 配置 devserve 配置

vue.config.js 配置 devserve 配置

2024-09-21 21:09:17 前端知识 前端哥 857 306 我要收藏

在 Vue CLI 项目中,devServer 配置用于设置开发服务器的行为。这包括了开发服务器的端口、主机名、是否开启 HTTPS、自动打开浏览器等设置,以及配置代理规则来解决跨域问题。

devServer 配置详解(version >= 4.0.0)

  • host: 设置开发服务器的主机地址,默认为 'localhost'

  • port: 设置开发服务器的端口号,默认为 8080。

  • https: 设置是否使用 HTTPS 协议,默认为 false

  • hot: 是否启用 HMR(Hot Module Replacement)。默认值为 true

  • open: 设置是否在启动服务器时自动打开浏览器,默认为 false

  • client: 浏览器端运行的一些脚本,这些脚本负责与 webpack-dev-server 通信。

    • logging: 允许在浏览器中设置日志级别,'log', 'info', 'warn', 'error', 'none', 'verbose'
    • overlay: 是否显示全屏的错误/警告覆盖层。 默认值为 { warnings: true, errors: true }
    • progress: 是否显示构建进度条。默认值为 true。
    • reconnect: 告诉 dev-server 它应该尝试重新连接客户端的次数。当为 true 时,它将无限次尝试重新连接(v4.4.0+)。
    • webSocketURL: 这个选项允许指定 URL 到 web socket 服务器(当你代理开发服务器和客户端脚本不总是知道连接到哪里时很有用)例: webSocketURL: 'ws://0.0.0.0:8080/ws'
    • webSocketTransport: 该配置项允许我们为客户端单独选择当前的 devServer 传输模式,或者提供自定义的客户端实现。这允许指定浏览器或其他客户端与 devServer 的通信方式。

    webSocketServer 设置 'ws' 或者 'sockjs' 是一个设置 devServer.client.webSocketTransportdevServer.webSocketServer 的快捷方式。

  • liveReload: 默认情况下,当监听到文件变化时 dev-server 将会重新加载或刷新页面。为了 liveReload 能够生效,devServer.hot 配置项必须禁用或者 devServer.watchFiles 配置项必须启用。将其设置为 false 以禁用 devServer.liveReload

  • headers: 为所有 HTTP 添加响应头。例如 { 'X-Custom-Header': 'value' }

  • server: 允许设置服务器和配置项 'http', 'https', 'spdy'(默认为 'http', v4.4.0+)。

  • compress: 是否启用 gzip 压缩。默认值为 true

  • webSocketServer: 该配置项允许我们选择当前的 web-socket 服务器或者提供自定义的 web-socket 服务器实现, 配置项 false, 'sockjs', 'ws'(默认为 'ws')。该模式使用 ws 作为服务器,客户端中的 WebSockets

  • proxy: 设置代理规则,用于解决开发环境下的跨域问题。

    • target: 代理的目标地址,即后端 API 的地址。
    • changeOrigin: 是否改变源,设置为 true 会使 Origin 请求头中的主机名变为目标 URL 的主机名。
    • pathRewrite: 重写路径,用于替换请求路径中的某些部分。
    • secure: 是否验证 SSL 证书。默认值为 true
    • logLevel: 代理的日志级别。可选值为 'debug', 'info', 'warn', 'error'。默认值为 'warn'
    • ws: 是否代理 websockets。默认值为 false
    • router: 路由规则,用于根据请求路径重定向代理。
    • context: 匹配条件,可以是正则表达式或字符串数组。
    • bypass: 一个函数,返回一个 URL 字符串或 false。如果返回 URL,则直接请求该 URL;如果返回 false,则使用代理。

其他配置

  • contentBase: 开发服务器提供的静态文件目录。默认值为 public 目录。
  • historyApiFallback: 是否启用 HTML5 history API 的回退。默认值为 true
  • before: 在服务器启动之前执行的函数,可以用来注册中间件。
  • after: 在服务器启动之后执行的函数,可以用来注册中间件。
  • setupMiddlewares: 是否设置中间件。默认值为 true

示例:

module.exports = {
  devServer: {
    host: '0.0.0.0', // 让你的服务器可以被外部访问
    port: 8080, // 端口
    https: false, // 不使用 HTTP 提供服务
    hot: true, //  模块热替换
    open: true, // 打开浏览器
    client:{
      overlay: { // 当出现编译错误或警告时,在浏览器中显示全屏覆盖。
      	warnings: true,
      	errors: true
      },
      progress: true, // 在浏览器中以百分比形式打印编译进度。
    },
    headers: { // 设置请求头
      'X-Custom-Header': 'value'
    },
    compress: true, // 启用 gzip 压缩
    proxy: {
      '/api': { // 对 /api 的请求会将请求代理到 http://localhost:4000。
        target: 'http://localhost:4000',
        changeOrigin: true, // 使 Origin 请求头中的主机名变为目标 URL 的主机名
        secure: false, // 不验证 SSL 证书
        logLevel: 'warn', // 代理的日志级别
        ws: true, // 使用 WebSockets 作为服务器
        pathRewrite: { // 重写路径
          '^/api': ''
        },
        router: function(req) {
          if (req.url.startsWith('/api')) {
            return '/api';
          }
          return false;
        },
        context: ['/api'],
        bypass: function(req) {
          if (req.headers.accept.indexOf('html') !== -1) {
            return '/index.html';
          }
        }
      }
    },
    contentBase: './public', // 开发服务器提供的静态文件目录
    historyApiFallback: true, // 是否启用 HTML5 history API 的回退
    before: function(app, server) {
      // 在服务器启动之前执行的函数
    },
    after: function(app, server) {
      // 在服务器启动之后执行的函数
    },
    setupMiddlewares: true,  // 设置中间件
  }
};
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18537.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!