vite开发服务器server选项配置（2024-05-29）

server.host​

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

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

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

NOTE

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

第一种情况是 localhost 被使用了。

Node.js 在 v17 以下版本中默认会对 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 中通过 LAN 访问开发服务器

当你在 WSL2 运行 Vite 时，仅设置 host: true 来从局域网访问服务器是不够的。

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 包的源码。

示例：

js

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

server.proxy​

  • 类型： Record<string, string | ProxyOptions>

为开发服务器配置自定义代理规则。期望接收一个 { key: options } 对象。任何请求路径以 key 值开头的请求将被代理到对应的目标。如果 key 值以 ^ 开头，将被识别为 RegExp。configure 选项可用于访问 proxy 实例。

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

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

示例：

js

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'/socket.io': {target: 'ws://localhost:5174',ws: true,},},},
})

server.cors​

  • 类型： boolean | CorsOptions

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

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 的情况下，非常有用。

NOTE

在默认配置下, 在 Vite 之前的反向代理应该支持代理 WebSocket。如果 Vite HMR 客户端连接 WebSocket 失败，该客户端将兜底为绕过反向代理、直接连接 WebSocket 到 Vite HMR 服务器：

Direct websocket connection fallback. Check out https://vitejs.dev/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 是仅在服务器端渲染中使用的文件。它们接受一个文件路径数组或相对于 root 的 fast-glob 通配符。

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

js

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 中的文件。若要了解更多详情和可能的临时替代方案，你可以关注 issue #8619。

在 Windows Linux 子系统（WSL）上使用 Vite

当需要在 Windows Subsystem for Linux (WSL) 2 上运行 Vite 时，如果项目文件夹位于 Windows 文件系统中，你需要将此选项设置为 { usePolling: true }。这是由于 Windows 文件系统的 WSL2 限制 造成的。

要解决这一问题，你可以采取以下两种办法之一：

  • 推荐：使用 WSL2 应用来编辑你的文件
    • 同时我们推荐将你的项目移出 Windows 文件系统，从 WSL2 访问 Windows 文件系统非常慢。移除这一开销将大大提升性能表现。
  • 设置 { usePolling: true }
    • 注意 usePolling 会导致高 CPU 占用率

server.middlewareMode​

  • 类型： 'ssr' | 'html'
  • 默认值： false

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

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

  • 示例：

js

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()

server.fs.strict​

  • 类型： boolean
  • 默认： true (自 Vite 2.7 起默认启用)

限制为工作区 root 路径以外的文件的访问。

server.fs.allow​

  • 类型： string[]

限制哪些文件可以通过 /@fs/ 路径提供服务。当 server.fs.strict 设置为 true 时，访问这个目录列表外的文件将会返回 403 结果。

可以提供目录和文件。

Vite 将会搜索此根目录下潜在工作空间并作默认使用。一个有效的工作空间应符合以下几个条件，否则会默认以 项目 root 目录 作备选方案。

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

接受一个路径作为自定义工作区的 root 目录。可以是绝对路径或是相对于 项目 root 目录 的相对路径。示例如下：

js

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

当 server.fs.allow 被设置时，工作区根目录的自动检索将被禁用。当需要扩展默认的行为时，你可以使用暴露出来的工具函数 searchForWorkspaceRoot：

js

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',],},},
})

server.fs.deny​

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

用于限制 Vite 开发服务器提供敏感文件的黑名单。这会比 server.fs.allow 选项的优先级更高。同时还支持 picomatch 模式。

server.origin​

  • 类型： string

用于定义开发调试阶段生成资源的 origin。

js

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

server.sourcemapIgnoreList​

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

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

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

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

js

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

注意

需要单独设置 server.sourcemapIgnoreList 和 build.rollupOptions.output.sourcemapIgnoreList。server.sourcemapIgnoreList 是一个仅适用于服务端的配置，并不从定义好的 rollup 选项中获得其默认值。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/843952.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Autoware 技术代码解读（三）

Autoware 技术代码解读（三）

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&#xff0c;并附带200G…
阅读更多...
​一款开源的.NET程序集反编译、编辑和调试神器

​一款开源的.NET程序集反编译、编辑和调试神器

前言 说到.NET相关的反编译工具大家脑海里第一个想到的工具是什么&#xff1f;ILSpy、dnSpy、还是dotPeek&#xff1f;咱们今天的主要内容是讲讲dnSpyEx&#xff08;dnSpyEx是dnSpy项目的非官方Fork维护版本&#xff09;这个开源的.NET程序集反编译、编辑和调试工具该如何使用…
阅读更多...
TypeScript 学习笔记（十七）：TypeScript 与现代前端构建工具的结合使用

TypeScript 学习笔记（十七）：TypeScript 与现代前端构建工具的结合使用

TypeScript 学习笔记（十七）：TypeScript 与现代前端构建工具的结合使用 1. 引言 在前几篇学习笔记中，我们探讨了 TypeScript 的基础知识、前后端框架的结合应用、测试与调试技巧、性能优化、前端架构设计、工具和生态系统，以及 TypeScript 与数据库的深度结合和第三方库的…
阅读更多...
Redis教程(十八)：Redis的Redisson的看门狗机制

Redis教程(十八)：Redis的Redisson的看门狗机制

传送门：Redis教程汇总篇，让你从入门到精通 Redisson的看门狗机制 Redisson的看门狗机制主要是指客户端在获取到锁之后，通过后台线程或定时任务自动续期的功能，以避免在锁持有期间因为处理时间过长而导致锁自动释放，进而确保操作的安全性与原子性。 这个机制的工作原理是…
阅读更多...
对于异地项目，集团总部如何进行有效管理？

对于异地项目，集团总部如何进行有效管理？

近几年&#xff0c;随着全球经济的发展和企业的崛起&#xff0c;越来越多的企业开始将业务扩展到不同的地理位置。这使得异地项目的管理成为了一个重要的挑战。异地项目指的是分布在不同地区或国家的项目&#xff0c;由总部或主要管理团队远程协调和管理。在这种情况下&#xf…
阅读更多...
Burnout Drift Multiplayer（多人赛车游戏模板）

Burnout Drift Multiplayer（多人赛车游戏模板）

Burnout Drift Multiplayer是一个完整的项目，已在PC、Android、iOS和WebGL上发布的Burnout Drift系列中使用。 [包括最新版本的Realistic Car Controller Pro] PC、WebGL和Android演示 包括Burnout Drift系列的所有功能。您只需几分钟即可轻松添加自己的车辆、场景和配乐。 警…
阅读更多...
Windows 下载安装Apache

Windows 下载安装Apache

一、官网下载 1、打开Apache官网http://httpd.apache.org&#xff0c;点击Download。 2、选择Windows版本&#xff0c;点击链接。 3、选择对应版本选择下载。 二、安装、设置 1、将下载好的解压。 2、依次打开Apache24-conf-httpd.conf,用记事本打开 1)、修改路径 2)、修改…
阅读更多...
mysql去除重复数据

mysql去除重复数据

需求描述 doc表有很多重复的title,想去除掉重复的记录 表结构 CREATE TABLE doc (id INT PRIMARY KEY,title VARCHAR(255),content TEXT );去重SQL -- 创建临时表 CREATE TEMPORARY TABLE temp_doc AS SELECT * FROM doc WHERE 10;-- 插入唯一的记录&#xff08;每个title最…
阅读更多...
[数据集][目标检测]红外兔子检测数据集VOC+YOLO格式96张1类别

[数据集][目标检测]红外兔子检测数据集VOC+YOLO格式96张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;96 标注数量(xml文件个数)&#xff1a;96 标注数量(txt文件个数)&#xff1a;96 标注类别数…
阅读更多...
Redis 源码学习记录：散列 (dict)

Redis 源码学习记录：散列 (dict)

散列 Redis 源码版本&#xff1a;Redis-6.0.9&#xff0c;本篇文章的代码均在 dict.h / dict.c 文件中。 散列类型可以存储一组无需的键值对&#xff0c;他特别适用于存储一个对象数据。 字典 Redis 通常使用字典结构体存储用户散列数据。字典是 Redis 的重要数据结构。除了散…
阅读更多...
机械行业工程设计资质乙级需要哪些人员

机械行业工程设计资质乙级需要哪些人员

申请机械行业工程设计资质乙级需要的人员主要包括以下几个方面&#xff0c;具体要求和数量根据参考文章归纳如下&#xff1a; 一、主要专业技术人员 数量要求&#xff1a;主要专业技术人员数量应不少于所申请行业资质标准中主要专业技术人员配备表规定的人数。学历和职称要求…
阅读更多...
在虚拟机上安装MySQL和Hive

在虚拟机上安装MySQL和Hive

在虚拟机上安装MySQL和Hive的步骤如下。这里将分别针对MySQL和Hive的安装进行说明。 MySQL安装步骤 1. 准备工作 下载MySQL安装包&#xff0c;选择与你虚拟机操作系统版本相匹配的MySQL版本&#xff0c;例如MySQL 8.0.35。 2. 卸载旧版本&#xff08;如果已安装&#xff09…
阅读更多...
java大学城水电管理系统源码(springboot)

java大学城水电管理系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的大学城水电管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 大学城水电管理系统的…
阅读更多...
PHP对接百度语音识别技术

PHP对接百度语音识别技术

PHP对接百度语音识别技术 引言 在目前的各种应用场景中&#xff0c;语音识别技术已经越来越常用&#xff0c;并且其应用场景正在不断扩大。 百度提供的语音识别服务允许用户通过简单的接口调用&#xff0c;将语音内容转换为文本。 本文将通过PHP语言集成百度的语音识别服务…
阅读更多...
批量视频剪辑神器：高效提取随机秒数画面，轻松实现视频素材精准筛选！

批量视频剪辑神器：高效提取随机秒数画面，轻松实现视频素材精准筛选！

在数字化时代&#xff0c;视频内容已成为我们生活中不可或缺的一部分。无论是个人创作者还是专业团队&#xff0c;都需要对视频素材进行高效处理。然而&#xff0c;面对大量的视频文件&#xff0c;如何快速提取出我们所需的画面片段&#xff0c;却成为了一个令人头疼的问题。今…
阅读更多...
【源码】【海外客服】简洁版海外客服系统/在线客服系统/即时聊天通讯源码

【源码】【海外客服】简洁版海外客服系统/在线客服系统/即时聊天通讯源码

1&#xff0c;此版本采用前台一人或多人与后台一人&#xff08;管理员&#xff09;进行会话模式 2&#xff0c;此版本前后台只能发送文字和图片&#xff08;图片是选择后自动发送&#xff09; 3&#xff0c;前后台根据IP来识别不同的会话者 4&#xff0c;前台发起会话后&…
阅读更多...
大数据——Spark

大数据——Spark

1.Spark MLlib概述 MLlib是Spark的机器学习&#xff08;Machine Learning&#xff09;库&#xff0c;旨在简化机器学习的工程实践工作&#xff0c;并方便扩展到更大规模。 MLlib由一些通用的学习算法和工具组成&#xff0c;包括分类、回归、聚类、协同过滤、降维等&#xff0…
阅读更多...
学习Uni-app开发小程序Day20

学习Uni-app开发小程序Day20

今天学习了&#xff1a;页面的渐变背景、使用deep修改子组件样式、全屏页面absolute定位布局和fit-content内容宽度、遮罩层状态转换及日期格式化、uni-popup弹窗层制作弹出信息 页面的渐变背景 需要设置页面背景&#xff0c;使用的是多个页面&#xff0c;这样就可以把背景做…
阅读更多...
开源自定义表单系统源码 一键生成表单工具 可自由DIY表单模型+二开

开源自定义表单系统源码 一键生成表单工具 可自由DIY表单模型+二开

分享一款开源自定义表单系统源码&#xff0c;能够实现99%各行业的报名、预约、加盟申请、调查等应用&#xff0c;而且同时多开创建多个表单&#xff0c;支持自定义各种字段模型&#xff0c;市面上需要的表单模型都含了&#xff0c;随便自定义啦&#xff0c;含完整的代码包和详细…
阅读更多...
经典文献阅读之--SMERF(通过标清导航地图增强车道感知和拓扑理解)

经典文献阅读之--SMERF(通过标清导航地图增强车道感知和拓扑理解)

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&#xff0c;并附带200G…
阅读更多...
最新文章

Copyright @ 2022~2023