开发服务器选项 ​

server.allowedHosts ​

• 类型： string[] | true
• 默认： []

Vite允许响应的主机名。 默认情况下，允许 localhost 及其下的所有 .localhost 域名和所有 IP 地址。 使用 HTTPS 时，将跳过此检查。

如果设置的字符串以 . 开头，则允许该主机名本身（不带 . ）以及该主机名下的所有子域名。例如， .example.com 将允许 example.com 、 foo.example.com 和 foo.bar.example.com 。如果设置为 true ，服务器将被允许响应任何主机的请求。

server.port ​

• 类型： number
• 默认值： 5173

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

server.strictPort ​

• 类型： boolean

设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。

server.https ​

• 类型： https.ServerOptions

启用 TLS + HTTP/2。该值是传递给 https.createServer() 的 options 对象 。

请注意，仅当同时使用 server.proxy 选项 时，才会降级为 TLS。

需要一个合法可用的证书。对基本使用的配置需求来说，你可以添加 @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 } 对象。任何请求路径以 key 值开头的请求将被代理到对应的目标。如果 key 值以 ^ 开头，将被识别为 RegExp 。 configure 选项可用于访问 proxy 实例。如果请求匹配任何配置的代理规则，该请求将不会被 Vite 转换。

请注意，如果使用了非相对的 基础路径 base ，则必须在每个 key 值前加上该 base 。

继承自 http-proxy 。完整选项详见 此处 。

在某些情况下，你可能也想要配置底层的开发服务器。（例如添加自定义的中间件到内部的 connect 应用中）为了实现这一点，你需要编写你自己的 插件 并使用 configureServer 函数。

示例：

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法：
      // http://localhost:5173/foo 
      // -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 带选项写法：
      // http://localhost:5173/api/bar 
      // -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      // 正则表达式写法：
      // http://localhost:5173/fallback/ 
      // -> http://jsonplaceholder.typicode.com/
      '^/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' 的实例
      // 代理 websockets 或 socket.io 写法：
      // ws://localhost:5173/socket.io 
      // -> ws://localhost:5174/socket.io
      // 在使用 `rewriteWsOrigin` 时要特别谨慎，因为这可能会让
      // 代理服务器暴露在 CSRF 攻击之下
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
        rewriteWsOrigin: true,
})

server.cors ​

• 类型： boolean | CorsOptions
• 默认： { origin: /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/ } （允许 localhost、 127.0.0.1 和 ::1 ）

为开发服务器配置 CORS。传递一个 选项对象 来调整行为，或设置为 true 来允许任何源。

server.headers ​

• 类型： OutgoingHttpHeaders

指定服务器响应的 header。

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 Secure）。

clientPort 是一个高级选项，只在客户端的情况下覆盖端口，这允许你为 websocket 提供不同的端口，而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理，这非常有用。

当 server.hmr.server 被定义后，Vite 将会通过所提供的的服务器来处理 HMR 连接。如果不是在中间件模式下，Vite 将尝试通过已有服务器处理 HMR 连接。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下，非常有用。

查看 vite-setup-catalogue 一节获取更多实例。

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

server.warmup ​

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

提前转换和缓存文件以进行预热。可以在服务器启动时提高初始页面加载速度，并防止转换瀑布。

clientFiles 是仅在客户端使用的文件，而 ssrFiles 是仅在服务端渲染中使用的文件。它们接受相对于 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 将不起作用。

server.middlewareMode ​

• 类型： boolean
• 默认值： false

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

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

• 示例：

import 
express
 from 'express'
import { 
createServer
 as 
createViteServer
 } from 'vite'
async function 
createServer
() {
  const 
app




    
 = 
express
()
  // 以中间件模式创建 Vite 服务器
  const 
vite
 = await 
createViteServer
({
    
server
: { 
middlewareMode
: true },
    
appType
: 'custom',
    // 不引入 Vite 默认的 HTML 处理中间件
  // 将 vite 的 connect 实例作中间件使用
  
app
.
use
(
vite
.
middlewares
)
  
app
.
use
('*', async (
req
, 
res
) => {
    // 由于 `appType` 的值是 `'custom'`，因此应在此处提供响应。
    // 请注意：如果 `appType` 值为 `'spa'` 或 `'mpa'`，Vite 会包含
    // 处理 HTML 请求和 404 的中间件，因此用户中间件应该在
    // Vite 的中间件之前添加，以确保其生效。
createServer
()

export default defineConfig({
  server: {
    fs: {
      // 允许为项目根目录的上一级提供服务
      allow: ['..']
})

import { defineConfig, searchForWorkspaceRoot } from 'vite'
export default defineConfig({
  server: {
    fs: {
      allow: [
        // 搜索工作区的根目录
        searchForWorkspaceRoot(process.cwd()),
        // 自定义规则
        '/path/to/custom/allow_directory',
        '/path/to/custom/allow_file.demo',
})

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

export default defineConfig({
  server: {
    // 这是默认值，它将把所有路径中含有 node_modules 的文件
    // 添加到忽略列表中。
    sourcemapIgnoreList(sourcePath, sourcemapPath) {
      return sourcePath.includes('node_modules')