Skip to content

开发服务器选项

pipflow 的本地开发服务器是基于 Browsersync 工具, 它为开发过程提供自动化、高效的同步与调试功能。

想要了解更多配置细节,请参考 这里

server.host

  • 类型: string
  • 默认: localhost

指定服务器应该监听哪个 IP 地址。

server.port

  • 类型: number
  • 默认: 9527

指定开发服务器端口。

也可以通过 CLI 使用 --port 3000 来设置。

server.https

  • 类型: boolean
  • 默认: false

为本地主机开发启用 https。注意: 代理选项不需要这样做,因为它会从目标网址中推断出来。

js
// Enable HTTPS for snippet mode
{
  https: true
}

// Enable HTTPS mode with custom certificates
{
  server: "./app",
  https: {
    key: "path-to-custom.key",
    cert: "path-to-custom.crt"
  }
}
// Enable HTTPS for snippet mode
{
  https: true
}

// Enable HTTPS mode with custom certificates
{
  server: "./app",
  https: {
    key: "path-to-custom.key",
    cert: "path-to-custom.crt"
  }
}

server.open

  • 类型: boolean
  • 默认: true

开发服务器启动时,自动在浏览器中打开应用程序。

server.server

  • 类型: string | boolean | object
  • 默认: dist

内置静态服务器配置。可以指定当前服务基本目录以及索引文件。

js
// Serve files from the app directory
{
  server: "app"
}

// Serve files from the app directory, with a specific index filename
{
  server: {
    baseDir: "app",
    index: "index.html"
  }
}
// Serve files from the app directory
{
  server: "app"
}

// Serve files from the app directory, with a specific index filename
{
  server: {
    baseDir: "app",
    index: "index.html"
  }
}

server.proxy

  • 类型: string | ProxyOptions
  • 默认: false

为开发服务器配置自定义代理规则。

js
// Using localhost sub directories
{
  proxy: {
    target: "http://localhost:4567",
  }
}

// Modify the server request before it hits your application
// and Modify the server response after it's returned from the proxy
{
  proxy: {
    target: "http://yourlocal.dev",
    proxyReq: [
      function(proxyReq) {
        proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
      }
    ],
    proxyRes: [
      function(proxyRes, req, res) {
        //...
      }
    ]
  }
}

// Modify the server response
{
  proxy: {
    target: '',
    middleware: function(req, res, next) {
      //...
      next();
    }
  }
}
// Using localhost sub directories
{
  proxy: {
    target: "http://localhost:4567",
  }
}

// Modify the server request before it hits your application
// and Modify the server response after it's returned from the proxy
{
  proxy: {
    target: "http://yourlocal.dev",
    proxyReq: [
      function(proxyReq) {
        proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
      }
    ],
    proxyRes: [
      function(proxyRes, req, res) {
        //...
      }
    ]
  }
}

// Modify the server response
{
  proxy: {
    target: '',
    middleware: function(req, res, next) {
      //...
      next();
    }
  }
}

server.middleware

  • 类型: function | function[]
  • 默认: false

中间件函数或插件。

js
{
  // Per-route middleware
  middleware: [
    {
      route: "/api",
      handle: function (req, res, next) {
        // handle any requests at /api
      }
    }
  ]
}
{
  // Per-route middleware
  middleware: [
    {
      route: "/api",
      handle: function (req, res, next) {
        // handle any requests at /api
      }
    }
  ]
}

server.cors

  • 类型: boolean
  • 默认: false

为开发服务器配置 CORS。

server.browser

  • 类型: string | string[]
  • 默认: default

要打开的浏览器。

示例:

js
{
  browser: 'google chrome'
}
{
  browser: 'google chrome'
}

server.ghostMode

  • 类型: boolean
  • 默认: false

任何设备上的点击、滚动和表单输入都将镜像到所有其他设备。

js
// Here you can disable/enable each feature individually
{
  ghostMode: {
    clicks: true,
    forms: true,
    scroll: false
  }
}

// Or switch them all off in one go
{
  ghostMode: false
}
// Here you can disable/enable each feature individually
{
  ghostMode: {
    clicks: true,
    forms: true,
    scroll: false
  }
}

// Or switch them all off in one go
{
  ghostMode: false
}

server.notify

  • 类型: boolean
  • 默认: true

浏览器右上角的小弹窗通知。

Released under the MIT License.