服务器选项

除非另有说明，本节中的选项仅适用于开发环境。

server.host

类型： string | boolean
默认值： 'localhost'

指定服务器应监听的 IP 地址。将其设置为 0.0.0.0 或 true 以监听所有地址，包括局域网和公共地址。

这可以通过 CLI 使用 --host 0.0.0.0 或 --host 设置。

注意

在某些情况下，其他服务器可能会响应而不是 Vite。

第一种情况是使用 localhost 时。v17 版本以下的 Node.js 默认会重新排序 DNS 解析地址的结果。当访问 localhost 时，浏览器使用 DNS 解析地址，并且该地址可能与 Vite 正在监听的地址不同。当地址不同时，Vite 会打印解析后的地址。

您可以设置 dns.setDefaultResultOrder('verbatim') 以禁用重新排序行为。然后，Vite 会将地址打印为 localhost。

vite.config.js

import { defineConfig
 } from 'vite'
import dns
 from 'node:dns'

dns
.setDefaultResultOrder
('verbatim')

export default defineConfig
({
  // omit
})

第二种情况是使用通配符主机（例如 0.0.0.0）时。这是因为监听非通配符主机的服务器优先于监听通配符主机的服务器。

从局域网访问 WSL2 上的服务器

在 WSL2 上运行 Vite 时，仅设置 host: true 无法从局域网访问服务器。有关更多详细信息，请参阅 WSL 文档。

server.port

类型： number
默认值： 5173

指定服务器端口。请注意，如果端口已被使用，Vite 会自动尝试下一个可用端口，因此这可能不是服务器最终监听的实际端口。

server.strictPort

类型： boolean

设置为 true 以在端口已被使用时退出，而不是自动尝试下一个可用端口。

server.https

类型： https.ServerOptions

启用 TLS + HTTP/2。请注意，当 server.proxy 选项也被使用时，这将降级为仅使用 TLS。

该值也可以是传递给 https.createServer() 的选项对象。

需要有效的证书。对于基本设置，您可以将 @vitejs/plugin-basic-ssl 添加到项目插件中，它会自动创建和缓存自签名证书。但我们建议您创建自己的证书。

server.open

类型： boolean | string

在服务器启动时自动在浏览器中打开应用程序。当值为字符串时，它将用作 URL 的路径名。如果您希望在特定的浏览器中打开服务器，您可以设置环境变量 process.env.BROWSER（例如 firefox）。您还可以设置 process.env.BROWSER_ARGS 以传递其他参数（例如 --incognito）。

BROWSER 和 BROWSER_ARGS 也是可以在 .env 文件中设置的特殊环境变量，用于配置它。有关更多详细信息，请参阅 open 包。

示例

export default defineConfig({
  server: {
    open: '/docs/index.html',
  },
})

server.proxy

类型： Record<string, string | ProxyOptions>

为开发服务器配置自定义代理规则。需要一个 { key: options } 对的对象。任何请求路径以该键开头的请求都将被代理到指定的 target。如果键以 ^ 开头，则将其解释为 RegExp。configure 选项可用于访问代理实例。如果请求匹配任何已配置的代理规则，则 Vite 不会转换该请求。

请注意，如果您使用非相对 base，则必须在每个键前加上该 base。

扩展 http-proxy。其他选项在此处。

在某些情况下，您可能还需要配置底层开发服务器（例如，向内部 connect 应用程序添加自定义中间件）。为此，您需要编写自己的插件并使用 configureServer 函数。

示例

export default defineConfig({
  server: {
    proxy: {
      // string shorthand:
      // http://localhost:5173/foo
      //   -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // with options:
      // http://localhost:5173/api/bar
      //   -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // with RegExp:
      // http://localhost:5173/fallback/
      //   -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // Using the proxy instance
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy will be an instance of 'http-proxy'
        },
      },
      // Proxying websockets or socket.io:
      // ws://localhost:5173/socket.io
      //   -> ws://localhost:5174/socket.io
      // Exercise caution using `rewriteWsOrigin` as it can leave the
      // proxying open to CSRF attacks.
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
        rewriteWsOrigin: true,
      },
    },
  },
})

server.cors

类型： boolean | CorsOptions

为开发服务器配置 CORS。默认情况下启用此选项，并允许任何来源。传递一个选项对象以微调行为或 false 以禁用。

server.headers

类型： OutgoingHttpHeaders

指定服务器响应头。

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 以禁用服务器错误覆盖层。

protocol 设置用于 HMR 连接的 WebSocket 协议：ws（WebSocket）或 wss（WebSocket 安全）。

clientPort 是一个高级选项，仅在客户端覆盖端口，允许您在与客户端代码在其上查找的端口不同的端口上提供 websocket。

当 server.hmr.server 被定义时，Vite 将通过提供的服务器处理 HMR 连接请求。如果不在中间件模式下，Vite 将尝试通过现有服务器处理 HMR 连接请求。当使用自签名证书或希望通过单个端口在网络上公开 Vite 时，这很有用。

查看 vite-setup-catalogue 以获取一些示例。

注意

使用默认配置，Vite 前面的反向代理预计支持代理 WebSocket。如果 Vite HMR 客户端无法连接 WebSocket，则客户端将回退到直接连接到 Vite HMR 服务器，绕过反向代理。

Direct websocket connection fallback. Check out https://vite.vuejs.ac.cn/config/server-options.html#server-hmr to remove the previous connection error.

回退发生时浏览器中出现的错误可以忽略。要通过直接绕过反向代理来避免错误，您可以：

将反向代理配置为也代理 WebSocket
设置 server.strictPort = true 并将 server.hmr.clientPort 设置为与 server.port 相同的值
将 server.hmr.port 设置为与 server.port 不同的值

server.warmup

类型： { clientFiles?: string[], ssrFiles?: string[] }
相关： 预热常用文件

预热文件以预先转换和缓存结果。这提高了服务器启动期间的初始页面加载速度，并防止了转换级联。

clientFiles 是仅在客户端使用的文件，而 ssrFiles 是仅在 SSR 中使用的文件。它们接受相对于 root 的文件路径或 tinyglobby 模式数组。

确保只添加常用文件，以免在启动时过载 Vite 开发服务器。

export default defineConfig({
  server: {
    warmup: {
      clientFiles: ['./src/components/*.vue', './src/utils/big-utils.js'],
      ssrFiles: ['./src/server/modules/*.js'],
    },
  },
})

server.watch

类型： object | null

传递给 chokidar 的文件系统观察器选项。

Vite 服务器观察器默认情况下会监视 root 并跳过 .git/、node_modules/ 以及 Vite 的 cacheDir 和 build.outDir 目录。更新监视的文件时，Vite 仅在需要时应用 HMR 并更新页面。

如果设置为 null，则不会监视任何文件。server.watcher 将提供一个兼容的事件发射器，但调用 add 或 unwatch 将不起作用。

监视 node_modules 中的文件

目前无法监视 node_modules 中的文件和包。有关进一步的进展和解决方法，您可以关注问题 #8619。

在 Windows 子系统 Linux (WSL) 2 上使用 Vite

在 WSL2 上运行 Vite 时，如果文件是由 Windows 应用程序（非 WSL2 进程）编辑的，则文件系统监视功能将无法正常工作。这是由于 WSL2 的限制导致的。这也适用于在使用 WSL2 后端的 Docker 中运行的情况。

要解决此问题，您可以：

推荐：使用 WSL2 应用程序编辑您的文件。
- 还建议将项目文件夹移到 Windows 文件系统之外。从 WSL2 访问 Windows 文件系统速度很慢。消除此开销将提高性能。
设置 { usePolling: true }。
- 请注意，usePolling 会导致 CPU 使用率过高。

server.middlewareMode

类型： boolean
默认值： false

以中间件模式创建 Vite 服务器。

相关： appType，SSR - 设置开发服务器
示例

import express
 from 'express'
import { createServer
 as createViteServer
 } from 'vite'

async function createServer
() {
  const app
 = express
()

  // Create Vite server in middleware mode
  const vite
 = await createViteServer
({
    server
: { middlewareMode
: true },
    // don't include Vite's default HTML handling middlewares
    appType
: 'custom',
  })
  // Use vite's connect instance as middleware
  app
.use
(vite
.middlewares
)

  app
.use
('*', async (req
, res
) => {
    // Since `appType` is `'custom'`, should serve response here.
    // Note: if `appType` is `'spa'` or `'mpa'`, Vite includes middlewares
    // to handle HTML requests and 404s so user middlewares should be added
    // before Vite's middlewares to take effect instead
  })
}

createServer
()

server.fs.strict

类型： boolean
默认值： true（从 Vite 2.7 开始默认启用）

限制服务工作区根目录之外的文件。

server.fs.allow

类型： string[]

限制可以通过 /@fs/ 提供服务的文件。当 server.fs.strict 设置为 true 时，访问此目录列表之外且未从允许的文件导入的文件将导致 403 错误。

可以提供目录和文件。

Vite 将搜索潜在工作区的根目录并将其用作默认值。有效的工作区满足以下条件，否则将回退到项目根目录。

在 package.json 中包含 workspaces 字段
包含以下文件之一
- lerna.json
- pnpm-workspace.yaml

接受路径以指定自定义工作区根目录。可以是绝对路径或相对于项目根目录的路径。例如

export default defineConfig({
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['..'],
    },
  },
})

当指定 server.fs.allow 时，将禁用自动工作区根目录检测。为了扩展原始行为，公开了实用程序 searchForWorkspaceRoot

import { defineConfig, searchForWorkspaceRoot } from 'vite'

export default defineConfig({
  server: {
    fs: {
      allow: [
        // search up for workspace root
        searchForWorkspaceRoot(process.cwd()),
        // your custom rules
        '/path/to/custom/allow_directory',
        '/path/to/custom/allow_file.demo',
      ],
    },
  },
})

server.fs.deny

类型： string[]
默认值： ['.env', '.env.*', '*.{crt,pem}', '**/.git/**']

对 Vite 开发服务器限制服务的敏感文件的黑名单。这将比 server.fs.allow 具有更高的优先级。支持 picomatch 模式。

server.origin

类型： string

定义开发过程中生成的资产 URL 的来源。

export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:8080',
  },
})

server.sourcemapIgnoreList

类型： false | (sourcePath: string, sourcemapPath: string) => boolean
默认值： (sourcePath) => sourcePath.includes('node_modules')

是否忽略服务器源映射中的源文件，用于填充 x_google_ignoreList 源映射扩展。

server.sourcemapIgnoreList 等效于 build.rollupOptions.output.sourcemapIgnoreList（用于开发服务器）。这两个配置选项之间的区别在于，rollup 函数使用相对路径调用 sourcePath，而 server.sourcemapIgnoreList 使用绝对路径调用。在开发过程中，大多数模块在同一文件夹中具有映射和源，因此 sourcePath 的相对路径就是文件名本身。在这些情况下，使用绝对路径会更方便。

默认情况下，它会排除所有包含 node_modules 的路径。您可以传递 false 来禁用此行为，或者，为了完全控制，可以使用一个函数，该函数接受源路径和源映射路径并返回是否忽略源路径。

export default defineConfig({
  server: {
    // This is the default value, and will add all files with node_modules
    // in their paths to the ignore list.
    sourcemapIgnoreList(sourcePath, sourcemapPath) {
      return sourcePath.includes('node_modules')
    },
  },
})

注意

server.sourcemapIgnoreList 和 build.rollupOptions.output.sourcemapIgnoreList 需要分别设置。server.sourcemapIgnoreList 仅是服务器配置，不会从定义的 rollup 选项获取其默认值。

服务器选项 ​

server.host ​

server.port ​

server.strictPort ​

server.https ​

server.open ​

server.proxy ​

server.cors ​

server.headers ​

server.hmr ​

server.warmup ​

server.watch ​

server.middlewareMode ​

server.fs.strict ​

server.fs.allow ​

server.fs.deny ​

server.origin ​

server.sourcemapIgnoreList ​