vite.config.js 开发服务器配置

简书 · · 84 次点击 · · 开始浏览    

1. server.host

  • 类型: string | boolean
  • 默认: 127.0.0.1
    指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址,包括局域网和公网地址。

2. server.port

  • 类型: number
  • 默认值: 3000
    指定开发服务器端口。注意:如果端口已经被使用,Vite 会自动尝试下一个可用的端口,所以这可能不是开发服务器最终监听的实际端口。

3. server.strictPort

  • 类型: boolean
    设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口。

4. server.https

  • 类型: boolean | https.ServerOptions
    启用 TLS + HTTP/2。注意:当 server.proxy 选项 也被使用时,将会仅使用 TLS。
    (TLS是具https:// URL时使用的协议,并且在现代浏览器中使用HTTP/2是必需的。主要出于性能原因,在测试应用程序时使用这些协议很有用。)

主要出于性能原因,在测试应用程序时使用这些协议很有用。

5. server.open

  • 类型: boolean | string
    服务器启动时自动在浏览器中打开应用程序。
    当此值为字符串时,会被用作 URL 的路径名。
    若你想指定喜欢的浏览器打开服务器,你可以设置环境变量 process.env.BROWSER(例如:chrome)。

6. server.proxy

  • 类型: Record<string, string | ProxyOptions>
    为开发服务器配置自定义代理规则。
    期望接收一个 { key: options } 对象。
    如果 key 值以 ^ 开头,将会被解释为 RegExp。
    configure 可用于访问 proxy 实例。

7. server.cors

  • 类型: boolean | CorsOptions
    为开发服务器配置 CORS。默认启用并允许任何源,传递一个 选项对象 来调整行为或设为 false 表示禁用。

8. server.force

9. server.hmr

  • 类型: boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }
    禁用或配置 HMR 连接(用于 HMR websocket 必须使用不同的 http 服务器地址的情况)。
    设置 server.hmr.overlay 为 false 可以禁用开发服务器错误的屏蔽。

10. server.watch

  • 类型: object
    Vite 服务器默认会忽略对 .git/ 和 node_modules/ 目录的监听。如果你需要对 node_modules/ 内的包进行监听,你可以为 server.watch.ignored 赋值一个取反的 glob 模式,例如:
export default {
  server: {
    watch: {
      ignored: ['!**/node_modules/your-package-name/**']
    }
  },
  // 被监听的包必须被排除在优化之外,
  // 以便它能出现在依赖关系图中并触发热更新。
  optimizeDeps: {
    exclude: ['your-package-name']
  }
}

示例:

export default {
  server: {
    host: true,
    port: '7005',
    strictPort: true,
    open: true,
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      }
    }
  }
};

本文来自:简书

感谢作者:简书

查看原文:vite.config.js 开发服务器配置

84 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传