vite配置之---开发服务器选项

LLLuckyGirl~

已于 2025-02-05 15:27:36 修改

阅读量548

点赞数 17

文章标签：前端学习

于 2025-02-05 10:27:20 首次发布

本文链接：https://blog.csdn.net/weixin_47808575/article/details/145209597

版权

开发服务器选项

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

server.host

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

指定服务器应该监听哪个 IP 地址。如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。

host: '0.0.0.0'：监听所有的网络接口，允许其他设备访问你的开发服务器，适用于局域网环境。
host: 'localhost'：只监听本地回环地址，通常用于在本机上访问。

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

值为boolean时：

server.open 的默认值是 false，这意味着开发服务器启动时不会自动打开浏览器。你可以通过将其设置为 true，让 Vite 自动打开浏览器。

值为string时：

你还可以为 server.open 提供一个字符串类型的值，来指定自动打开的 URL。这对于在指定端口或带有路径的 URL 时非常有用。

// vite.config.js 或 vite.config.ts
export default {
  server: {
    open: '/path/to/your/app', // 自动打开 http://localhost:3000/path/to/your/app
  },
}

使用特定的浏览器打开：

如果你希望 Vite 使用特定的浏览器打开应用程序，可以将 server.open 配置为一个对象，指定 browser 字段。

open.target 指定了打开的路径，而 open.browser 指定了浏览器（如 chrome 或 firefox）。

// vite.config.js 或 vite.config.ts
export default {
  server: {
    open: {
      target: '/path/to/your/app',   // 可以是指定路径的 URL
      browser: 'chrome',             // 指定使用的浏览器，例：'chrome', 'firefox'
    },
  },
}

server.proxy

在 Vite 的配置文件中，server.proxy 是一个用于设置代理的配置项，用于将开发服务器中的某些请求转发到其他服务器或 API 端点，通常用于解决跨域问题或者在开发环境中模拟后端 API。

类型： Record<string, string | ProxyOptions>

类型详解：

键 (string)：通常是代理的目标 URL 或路径的前缀，比如 /api。
值 (string | ProxyOptions)：
- string：代理目标的 URL，例如 'http://localhost:5000'。
- ProxyOptions：一个对象，提供更多的配置选项，比如目标地址、重写路径、跨域设置等。

代理到一个简单的 URL（字符串）：

这是最简单的代理配置，只需指定目标地址：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': 'http://localhost:5000',  // 所有以 `/api` 开头的请求都会被代理到 `http://localhost:5000`
    },
  },
}

使用 ProxyOptions 对象进行更复杂的配置：

target：目标服务器的地址，所有以 /api 开头的请求都会被转发到这个地址。
changeOrigin：默认值是 false。设置为 true 时，代理请求的 Origin 头部会被修改为目标地址的 Origin，用来解决跨域问题。
rewrite：一个函数，用于修改请求的路径。上述示例中会移除路径中的 /api 前缀。
secure：如果代理的目标是 HTTPS 且存在证书问题，设置为 false 可以禁用 SSL 校验。

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',  // 代理的目标地址
        changeOrigin: true,               // 是否修改请求头中的 `origin` 字段，解决跨域问题
        rewrite: (path) => path.replace(/^\/api/, ''),  // 重写路径，去掉 `/api` 前缀
        secure: false,                    // 如果是 https 的 API，设置为 `false` 可以避免 SSL 错误
      },
    },
  },
}

server.cors

server.cors 配置就是告诉你的开发服务器允许跨域请求，解决浏览器的跨域限制问题。通过开启它，前端可以向不同端口、不同域名的后端发送请求，而不被浏览器阻止。

类型： boolean | CorsOptions

当类型为boolean值时：

这意味着，如果你的前端和后端在不同的端口或域名上，浏览器不会拦截这些请求。

// vite.config.js
export default {
  server: {
    cors: true,  // 启用 CORS，允许跨域请求
  },
}

当类型为CorsOptions值时

// vite.config.js
export default {
  server: {
    cors: {
      origin: 'http://example.com',    // 允许来自 example.com 的请求
      methods: ['GET', 'POST'],        // 允许的 HTTP 方法
      allowedHeaders: ['Content-Type', 'Authorization'],  // 允许的请求头
      credentials: true,               // 是否允许发送凭证（如 cookies）
    },
  },
}

server.headers

类型： OutgoingHttpHeaders

指定服务器响应的 header。

server.hmr(后续再更新)

在 Vite 中，server.hmr 是用于配置 热模块替换（Hot Module Replacement，HMR） 的功能。HMR 是一种开发时功能，它允许你在修改代码时，只重新加载改变的部分，而不是整个页面，从而提高开发效率并保持应用的状态（例如表单内容、滚动位置等）。

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

主要属性

1、usePolling

类型: boolean
默认值: false
描述: 该选项用于开启或关闭轮询文件变动的功能。默认情况下，Vite 使用操作系统的文件系统通知机制来监视文件变化，效率较高。但是，如果你在某些特殊环境下（例如在虚拟机中、Docker 容器中、Windows 的某些网络共享目录中）遇到文件变化无法检测的情况，可以通过开启 usePolling: true 来使用轮询机制。

// 如果你启用了 usePolling: true，则可以通过 interval 配置轮询的间隔时间，单位是毫秒。该值控制每次轮询之间的时间间隔。减小 interval 会使得文件变化检测更灵敏，但可能会增加 CPU 使用率。
server: {
  watch: {
    usePolling: true,
    interval: 500,  // 500ms轮询一次
  },
}

2、binary

类型: boolean
默认值: false
描述: 控制是否监视二进制文件的变化。默认情况下，Vite 只会监视文本文件（如 .js, .ts, .html, .css 等），对于二进制文件（如 .jpg, .png）则不做监控。如果需要监控二进制文件的变化（比如在处理图像文件时），可以将该选项设置为 true。

server: {
  watch: {
    binary: true,  // 监视二进制文件变化
  },
}

3、ignored

类型: string | string[] | RegExp | RegExp[]
默认值: ['**/node_modules/**']
描述: 用于指定哪些文件或目录不需要被监视。该属性可以是一个字符串、正则表达式，或者数组。如果你不希望 Vite 监视某些文件或目录（例如大体积的文件夹或依赖文件夹），可以通过这个选项来忽略它们。

server: {
  watch: {
    ignored: ['**/node_modules/**', '**/build/**'],
  },
}

4、exclude

类型: string | string[] | RegExp | RegExp[]
描述: 类似于 ignored，但该选项主要是排除一些特定的文件或目录。在某些情况下，你可以通过 exclude 来忽略特定类型的文件或子文件夹，防止它们影响文件监听的性能。

5、persistent

类型: boolean
默认值: true
描述: 该选项控制文件监视是否持久化。当该选项设置为 true 时，即使没有文件发生变化，Vite 仍会保持对文件系统的监视。这个选项对于长时间运行的开发服务器有用。

何时使用 `server.watch` 配置？

虚拟机/容器环境：如在 Docker 容器中，默认的文件系统通知机制可能不可靠，此时使用轮询（usePolling: true）是一个常见的解决方案。
跨平台开发：在 Windows 等某些操作系统上，文件监视可能会出现问题，通过调整 usePolling 和 interval 来优化监视行为。
性能优化：当你只关心某些文件夹或类型的变动时，使用 ignored 或 exclude 可以减小不必要的文件监视负担，提高性能。

server.origin

用于配置开发服务器的url

类型： string

server.middlewareMode

server.middlewareMode 是 Vite 中的一个配置选项，允许你以中间件的形式运行 Vite 开发服务器。

类型： boolean
默认值： false

使用场景

集成到自定义服务器中：你可能已经有一个 Node.js/Express 等的自定义服务器，想要将 Vite 的热更新和构建功能作为一个中间件嵌入到这个服务器中，而不是让 Vite 启动一个独立的开发服务器。
与其他工具集成：如果你的项目中使用了其它工具，如 Koa、Fastify 等，你可以将 Vite 的开发功能集成到这些工具中，通过中间件的方式来实现热重载和模块替换等功能。