vite:常见的配置
最近在捣鼓一下vite,因为自己一直在使用react,就选择vite、react来体验一下vite。
使用最简单的方法创建一个应用:yarn create vite,然后选择react框架。
vite默认配置是使用了defineConfig工具函数:
import { defineConfig } from 'vite'
export default defineConfig({// ...
})
不管是js还是ts,都可以直接使用defineConfig工具函数,如果需要基于dev、serve或者build命令来选择不同选项,那就选择导出一个函数,比如:
export default defineConfig(({ command, mode, ssrBuild }) => {if (command === 'serve') {return {// dev 独有配置}} else {// command === 'build'return {// build 独有配置}}
})
共享选项
root
这是项目根目录【index.html的位置】,可以根据自己项目的规范来配置。比如:
const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {return {root,plugins: [react()]};
});
base
开发或者生产环境服务的公共基础路径:

mode
mode就是指明模式,比如:development或者production,如果在vite.config.ts中配置的话,那么就会把serve和build模式下覆盖掉
plugin
应用需用用到的插件,是一个数组,因为应用中可能使用到很多插件。vite+react中插件就是react,比如:
import react from "@vitejs/plugin-react";
const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");return {base: VITE_PUBLIC_PATH,root,plugins: [react()]};
});
resolve.alias
设置别名,比如:完整配置
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";const root: string = process.cwd();// 查找路径
const pathResolve = (dir: string): string => {return resolve(__dirname, ".", dir);
};
// 别名
const alias: Record<string, string> = {"@": pathResolve("src"),"@build": pathResolve("build"),
};
// https://vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) => {const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");return {base: VITE_PUBLIC_PATH,root,plugins: [react()],resolve: {alias,},};
});
server
开发服务器配置选项。
- host,指定开发服务器监听的某个IP地址,如果是设置为
0.0.0.0或者true,那就是默认监听所有的地址。 - port,开发服务器端口号
- strictPort,设置为true的时候,遇到端口号被占用了,就会直接退出,
- https,是否开启HTTPS
- open,自动在浏览器中开启应用程序
- proxy,请求路径的代理,比如
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,},},},
})相关文章:
vite:常见的配置
最近在捣鼓一下vite,因为自己一直在使用react,就选择vite、react来体验一下vite。 使用最简单的方法创建一个应用:yarn create vite,然后选择react框架。 vite默认配置是使用了defineConfig工具函数: import { defi…...
计算机图形学:liang算法和Cyrus-Beck算法
其中Cyrus-Beck算法呢,是计算一根直线一个多边形的交线段;liang算法是Cyrus的一个特例,即多边形刚好是矩形;先看看Cyrus算法的思路【从别的博客找的图片】:这很容易理解,点积>0时就可能中内部嘛…...
React组件之间的通信方式总结(上)
先来几个术语: 官方我的说法对应代码React elementReact元素let element<span>A爆了</span>Component组件class App extends React.Component {}无App为父元素,App1为子元素<App><App1></App1></App> 本文重点&…...
C++17 nodiscard标记符
文章目录前言弃值表达式nodiscard标记符函数非弃值声明类/枚举类/结构 非弃值声明返回类引用与类指针前言 在C 17中引入了一个标记符nodiscard,用于声明一个 “非弃值(no-discard)表达式”。那么在开始之前,我们需要了解一下什么是弃值表达式。 弃值表…...
SAP 寄售业务的标准流程
SAP的标准寄售业务,供应商提供的物料只有在公司使用之后才需支付应付账款,类似是一种先吃后付钱的餐饮流程。 SAP的寄售流程把实际业务中的供应商,采购方收货,采购方消耗物料,采购方依据消耗物料数量进行付款ÿ…...
操作系统高频知识
目录 一、线程与进程的区别 区别: 二、多进程和多线程区别 三、进程与程序的区别 三、死锁 1、是什么 2、产生的原因 3、产生的必要条件(4个) 4、如何预防 5、如何避免 6、如何检测 7、如何解除 一、线程与进程的区别 1、线程&a…...
加载预训练模型,模型微调,在自己的数据集上快速出效果
针对于某个任务,自己的训练数据不多,先找到一个同类的别人训练好的模型,把别人现成的训练好了的模型拿过来,换成自己的数据,调整一下参数,再训练一遍,这就是微调(fine-tuneÿ…...
VScode远程连接服务器-过程试图写入的管道不存在-could not establist connection to【已解决】
问题描述 使用服务器的过程中突然与服务器断连,报错如下:could not establist connection to [20:23:39.487] > ssh: connect to host 10.201.0.131 port 22: Connection timed out > [20:23:39.495] > 过程试图写入的管道不存在。 > [20…...
电子技术——B类输出阶
电子技术——B类输出阶 下图展示了一个B类输出阶的原理图,B类输出阶由两个互补的BJT组成,不同时导通。 原理 当输入电压 vI0v_I 0vI0 的时候,两个晶体管都截止输出电压为零。当 vIv_IvI 上升至超过0.5V的时候,此时 QNQ_NQN…...
【老卫搬砖】034期:HarmonyOS 3.1 Beta 1初体验,我在本地模拟器里面刷短视频
今天啊打开这个DevEco Studio的话,已经提示有3.1Beta1版本的一个更新啊。然后看一下它的一些特性。本文也演示了如何在本地模拟器里面运行HarmonyOS版短视频。 主要特性 新特性包括: Added support for Windows 11 64-bit and macOS 13.x OSs, as well…...
Day901.内部临时表 -MySQL实战
内部临时表 Hi,我是阿昌,今天学习记录的是关于内部临时表的内容。 sort buffer、内存临时表和 join buffer。这三个数据结构都是用来存放语句执行过程中的中间数据,以辅助 SQL 语句的执行的。 其中,在排序的时候用到了 sort bu…...
jstatd的启动方式与关闭方式
启动方式与注意事项: 启动方式: 前台启动不打印日志: jstatd -J-Djava.security.policyjstatd.all.policy -J-Djava.rmi.server.hostname服务器IP 前台启动并打印日志: ./jstatd -J-Djava.security.policyjstatd.all.policy -…...
_improve-3
createElement过程 React.createElement(): 根据指定的第一个参数创建一个React元素 React.createElement(type,[props],[...children] )第一个参数是必填,传入的是似HTML标签名称,eg: ul, li第二个参数是选填,表示的是属性&#…...
C++——异常
目录 C语言传统的处理错误的方式 C异常概念 异常的使用 异常的抛出和匹配原则 在函数调用链中异常栈展开匹配原则 自定义异常体系 异常的重新抛出 编辑 异常安全 异常规范 C标准库的异常体系 异常的优缺点 C语言传统的处理错误的方式 传统的错误处理机制: …...
MVVM 架构进阶:MVI 架构详解
前言Android开发发展到今天已经相当成熟了,各种架构大家也都耳熟能详,如MVC,MVP,MVVM等,其中MVVM更是被官方推荐,成为Android开发中的显学。不过软件开发中没有银弹,MVVM架构也不是尽善尽美的,在使用过程中…...
有没有必要考PMP证书?
其实针对有没有必要考试吗,这个可以根本不同行业的人来决定的。 1.高等教育项目管理专业科班出身的人员。 在我国本科学历和硕士研究生学历中,项目管理也有开设。不管以后从事的工作是否为项目管理或其他管理,作为本专业的同学,…...
1 机器学习基础
1 机器学习概述 1.1 数据驱动的问题求解 大数据-Big Data 大数据的多面性 1.2 数据分析 机器学习:海量的数据,获取有用的信息 专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之…...
java基础系列(六) sleep()和wait() 区别
一.前言 关于并发编程这块, 线程的一些基础知识我们得搞明白, 本篇文章来说一下这两个方法的区别,对Android中的HandlerThread机制原理可以有更深的理解, HandlerThread源码理解,请查看笔者的这篇博客: HandlerThread源码理解_handlerthread 源码_broadview_java的博客-CSDN博…...
Urho3D序列化
从Serializable派生的类可以通过定义属性将其自动序列化为二进制或XML格式。属性存储到每个类的上下文中。场景加载/保存和网络复制都是通过从Serializable派生Node和Component类来实现的。 支持的属性类型是Variant支持的所有属性类型,不包括指针和自定义值。 属性…...
企业级信息系统开发学习1.3——利用注解配置取代Spring配置文件
文章目录一、利用注解配置类取代Spring配置文件(一)打开项目(二)创建新包(三)拷贝类与接口(四)创建注解配置类(五)创建测试类(六)运行…...
16-bit像素艺术AI终端效果展示:实时HUD状态栏+物理位移反馈动效演示
16-bit像素艺术AI终端效果展示:实时HUD状态栏物理位移反馈动效演示 1. 像素幻梦创意工坊概览 Pixel Dream Workshop(像素幻梦创意工坊)是一款革命性的像素艺术生成工具,基于先进的FLUX.1-dev扩散模型构建。与传统AI绘图工具不同…...
企业级Java SMB客户端:jcifs-ng深度架构解析与实战指南
企业级Java SMB客户端:jcifs-ng深度架构解析与实战指南 【免费下载链接】jcifs-ng A cleaned-up and improved version of the jCIFS library 项目地址: https://gitcode.com/gh_mirrors/jc/jcifs-ng jcifs-ng是一个经过彻底重构和优化的Java SMB客户端库&am…...
3步突破设备壁垒:让VR内容在普通显示器上重生的开源方案
3步突破设备壁垒:让VR内容在普通显示器上重生的开源方案 【免费下载链接】VR-reversal VR-Reversal - Player for conversion of 3D video to 2D with optional saving of head tracking data and rendering out of 2D copies. 项目地址: https://gitcode.com/gh_…...
从g2o优化框架看TEB算法:手撕局部路径规划的图优化实现
从g2o优化框架看TEB算法:手撕局部路径规划的图优化实现 在机器人导航领域,局部路径规划算法的性能直接决定了机器人在动态环境中的反应速度和避障能力。TEB(Timed Elastic Band)算法作为ROS生态中广泛采用的解决方案,其…...
深入 Spring 源码,剖析设计模式的落地实践
写在文章开头 阅读源码是理解框架最有效的方式之一,Spring 源码中蕴含了大量设计模式的经典应用。本文将从源码层面深入剖析这些设计模式,带你理解框架设计精髓,掌握在实际项目中灵活运用的能力。 你好,我是 SharkChili ,Java Guide 核心维护者之一,对 Redis、Nighting…...
LeetCode 1423. 可获得的最大点数【定长滑窗,逆向和正向思维】1574
本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…...
Qwen3.5-4B-Claude-Opus-GGUF效果展示:TCP三次握手状态机推理
Qwen3.5-4B-Claude-Opus-GGUF效果展示:TCP三次握手状态机推理 1. 模型能力概览 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个专注于逻辑推理和结构化分析的轻量级AI模型。这个基于Qwen3.5-4B的蒸馏版本特别擅长处理需要分步骤解释的技术问题&#…...
告别Python版本混乱!Windows下用pyenv-win + virtualenvwrapper打造多项目开发环境(保姆级避坑指南)
告别Python版本混乱!Windows下用pyenv-win virtualenvwrapper打造多项目开发环境(保姆级避坑指南) 你是否经历过这样的场景:手头同时维护着三个Python项目——一个基于Django 2.2的老系统要求Python 3.6,新开发的Fast…...
Qwen2.5-72B-GPTQ开源大模型:农业病虫害识别与防治方案生成
Qwen2.5-72B-GPTQ开源大模型:农业病虫害识别与防治方案生成 1. 模型介绍 Qwen2.5-72B-Instruct-GPTQ-Int4是通义千问大模型系列的最新版本,专为复杂任务优化设计。这个72亿参数的模型经过指令调优和4-bit量化处理,在保持高性能的同时大幅降…...
KindEditor富文本编辑器:轻量级网页内容创作解决方案
KindEditor富文本编辑器:轻量级网页内容创作解决方案 【免费下载链接】kindeditor WYSIWYG HTML editor 项目地址: https://gitcode.com/gh_mirrors/ki/kindeditor 在当今Web开发中,内容编辑功能是许多网站的核心需求,但开发者常常面临…...
