使用 Vite 提升前端开发体验：入门与配置指南
在现代前端开发中，构建工具的选择对开发效率和项目性能有着至关重要的影响。Vite 是一个新兴的前端构建工具，由 Vue.js 的作者尤雨溪开发，旨在通过利用现代浏览器的原生 ES 模块特性，提供更快的开发服务器启动速度和更高效的热更新机制。本文将介绍 Vite 的基本概念、使用方法以及常见配置，帮助你快速上手并充分发挥其优势。
什么是 Vite？
Vite 是一个现代化的前端构建工具，专注于提升开发体验和构建效率。它的核心特点包括：
-
快速启动
Vite 利用原生 ES 模块，避免了传统打包工具在开发阶段需要打包整个项目的瓶颈，从而实现毫秒级的冷启动。 -
按需编译
只有在浏览器请求时，Vite 才会编译当前需要的文件，而不是一次性编译整个项目，这大大减少了等待时间。 -
高效热更新
Vite 通过 ES 模块实现了快速的热模块替换（HMR），开发者可以在保存代码后立即看到更新效果，无需刷新页面。 -
开箱即用
Vite 内置了对 TypeScript、JSX、CSS 预处理器等的支持，减少了繁琐的配置工作。 -
多框架支持
虽然 Vite 由 Vue.js 团队开发，但它同样支持 React、Preact、Svelte 等主流前端框架。 -
生产优化
在生产环境中，Vite 使用 Rollup 进行构建，生成高效的静态资源。
如何使用 Vite？
1. 创建项目
使用 Vite 创建新项目非常简单。可以通过以下命令快速初始化一个项目：
# 使用 npm
npm create vite@latest# 使用 yarn
yarn create vite# 使用 pnpm
pnpm create vite按照提示输入项目名称并选择模板（如 Vue、React、Vanilla 等）。
2. 启动开发服务器
进入项目目录并启动开发服务器：
# 进入项目目录
cd my-vite-project# 安装依赖
npm install# 启动开发服务器
npm run dev 启动后，Vite 会提供一个本地开发服务器地址（通常是 http://localhost:5173），你可以在浏览器中访问该地址查看项目。
3. 构建生产环境代码
开发完成后，使用以下命令构建生产环境代码：
npm run build 构建结果会输出到 dist 目录。
4. 预览生产环境构建
可以使用以下命令预览生产环境构建结果：
npm run preview如何配置 Vite？
Vite 的配置文件是 vite.config.js（或 vite.config.ts），位于项目根目录。以下是一些常见的配置示例：
1. 基本配置
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果使用 Vueexport default defineConfig({plugins: [vue()], // 使用的插件server: {port: 3000, // 开发服务器端口open: true, // 自动打开浏览器},build: {outDir: 'dist', // 构建输出目录assetsDir: 'assets', // 静态资源目录},
});2. 配置别名（Alias）
为了方便引入模块，可以配置路径别名：
import { defineConfig } from 'vite';
import path from 'path';export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, './src'), // 将 @ 指向 src 目录},},
});在代码中使用：
import MyComponent from '@/components/MyComponent.vue';3. 配置环境变量
Vite 使用 .env 文件来管理环境变量：
-
.env：默认环境变量 -
.env.development：开发环境变量 -
.env.production：生产环境变量
在 .env 文件中定义变量：
VITE_API_URL=https://api.example.com在代码中访问：
const apiUrl = import.meta.env.VITE_API_URL;4. 配置代理（Proxy）
解决开发环境下的跨域问题：
export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:3000', // 目标服务器changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径},},},
});5. 使用插件
Vite 支持丰富的插件，例如：
-
@vitejs/plugin-vue：支持 Vue 单文件组件。
-
@vitejs/plugin-react：支持 React。
-
vite-plugin-svg-icons：处理 SVG 图标。
安装插件后，在 vite.config.js 中配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-plugin-svg-icons';export default defineConfig({plugins: [vue(), svgLoader()],
});6. 配置 CSS 预处理器
Vite 内置支持 CSS 预处理器（如 Sass、Less），只需安装对应的依赖：
npm install sass然后在代码中直接使用：
// style.scss
$primary-color: red;body {color: $primary-color;
}7. 自定义构建选项
可以配置构建的细节，例如代码拆分、压缩等：
export default defineConfig({build: {minify: 'terser', // 代码压缩工具rollupOptions: {output: {manualChunks: {lodash: ['lodash'], // 将 lodash 拆分为单独的文件},},},},
});总结
Vite 是一个功能强大且灵活的前端构建工具，通过利用现代浏览器的特性和高效的构建机制，显著提升了开发体验和构建速度。无论是快速原型开发还是大型项目构建，Vite 都能满足你的需求。通过本文的介绍，你应该已经掌握了 Vite 的基本使用方法和常见配置技巧。现在，就尝试在你的下一个项目中使用 Vite 吧
相关文章：
使用 Vite 提升前端开发体验：入门与配置指南
在现代前端开发中，构建工具的选择对开发效率和项目性能有着至关重要的影响。Vite 是一个新兴的前端构建工具，由 Vue.js 的作者尤雨溪开发，旨在通过利用现代浏览器的原生 ES 模块特性，提供更快的开发服务器启动速度和更高效的热更新…...
WPS JS宏编程教程（从基础到进阶）--第二部分：WPS对象模型与核心操作
第二部分：WPS对象模型与核心操作 WPS对象的属性、方法、集合 工作簿对象常用表达方式工作表对象常用表达方式单元格对象常用表达方式 单元格操作实战 单元格复制与重定位单元格偏移与尺寸调整 颜色设置专题 索引颜色与RGB颜色按条件动态设置单元格颜色 第二部分&…...
瑞数信息《BOTS自动化威胁报告》正式发布
在数字化时代，BOTS自动化攻击如同一场无声的风暴，正以前所未有的态势席卷全球网络空间。为了让各行业更好地应对自动化威胁挑战，瑞数信息作为BOTS自动化攻击防护领域的专业厂商，多年来持续输出BOTS自动化威胁报告，为各…...
)
【NUUO 摄像头】(弱口令登录漏洞)
漏洞简介：NUUO 是NUUO公司的一款小型网络硬盘录像机设备。 NUUO NVRMini2 3.0.8及之前版本中存在后门调试文件。远程攻击者可通过向后门文件handle_site_config.php发送特定的请求利用该漏洞执行任意命令。 1.Fofa搜索语句： 在Fofa网站，搜索&…...
Android系统的安全问题 - Linux的能力模型（Capability）和 SELinux 的区别
Linux 的能力模型（Capabilities）和 SELinux 是两种不同的安全机制，虽然它们都用于增强 Linux 系统的安全性，但它们的实现方式和目标有所不同。 1. Linux Capabilities（能力模型） 作用：传统的 …...
Rust安装并配置配置vscode编译器
一. 下载rustup-init.exe rust下载网址：Getting started - Rust Programming Language 根据系统，选择适合的exe文件 我选择的的是右边64bit的 打开下载的文件 输入1，回车 二. Visual C 安装 自动下载安装vs 等待安装完毕 三. Rust 安装…...
Spring Boot响应压缩配置与优化
一、核心工作机制 1.1 自动协商触发条件 Spring Boot的响应压缩功能基于智能协商机制，需同时满足以下条件方可触发： 客户端支持：请求头包含Accept-Encoding: gzip/deflate数据量阈值：响应体大小超过预设值（默认2KB&…...
el-select开启filterable模式，限制输入框输入类型
遇到el-select开启filterable模式查询，下拉框内容是文字与数字组合版，导致校验不准，且没有属性能直接限制focus输入的内容，这时候可以用自定义属性来解决 实例：（以只能输入数字为例） <el-for…...
创建login.api.js步骤和方法
依次创建 login.api.js、home.api.js...... login.api.js、home.api.js 差不多 导入到 main.js main.js 项目中使用...
在线运行vscode
安装 https://github.com/coder/code-server?utm_sourcesyndication&pubDate20250317 运行前预览脚本 curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run运行脚本 curl -fsSL https://code-server.dev/install.sh | sh其他 可以通过后台服务运行&am…...
【Nginx】可以做哪些优化？
一、配置文件优化 1.1 性能优化 开启网页压缩 gzip on;设置网页缓存时间expires 缓存时间;设置连接保持超时keepalive_timeout 服务端超时时间 客户端超时时间;设置连接保持最大请求数keepalive_requests设置工作进程数 worker_processes 与服务器CPU数量…...
-2)
springboot在feign和线程池中使用TraceId日志链路追踪(最终版)-2
文章目录 简述问题feign调用时给head加入traceIdFeignConfig配置FeignConfig 局部生效feign拦截器和配置合并为一个文件（最终版）feign异步调用拦截器配置[不常用] 使用TTL自定义线程池为什么需要TransmittableThreadLocal？ 总结参考和拓展阅读…...
datawhale组队学习-大语言模型-task5：主流模型架构及新型架构
目录 5.3 主流架构 5.3.1 编码器-解码器架构 5.3.2 因果解码器架构 5.3.3 前缀解码器架构 5.4 长上下文模型 5.4.1 扩展位置编码 5.4.2 调整上下文窗口 5.4.3 长文本数据 5.5 新型模型架构 5.5.1 参数化状态空间模型 5.5.2 状态空间模型变种 5.3 主流架构 在预训…...
《Matplotlib三维可视化工业实践——从分子模拟到流体力学》
目录 编辑 一、工业三维可视化挑战 1.1 典型工业场景需求 1.2 技术痛点分析 二、Matplotlib三维可视化基础 2.1 三维坐标体系构建 2.2 核心三维绘图API 三、分子模拟可视化实战 3.1 晶体结构渲染 3.2 分子轨迹动态演示 四、流体力学场数据优化渲染 4.1 矢量场高效…...
【neo4j数据导出并在其他电脑导入】
停止服务 neo4j stop 导出 neo4j-admin database dump neo4j --to-path"C:\Users\12901\Downloads\test folder" 导入 将 .dump 文件放在一个目录中 mkdir /root/dump-directory mv /root/neo4j.dump /root/dump-directory/ 使用包含 .dump 文件的目录路径作为 …...
多智能体融合（Multi-Agent Fusion）
多智能体融合（Multi-Agent Fusion）是指在多智能体系统（MAS, Multi-Agent System）中，多个智能体（Agent）通过协作、竞争或共享信息，实现全局最优的智能决策和任务执行。该方法广泛应用…...
状态模式（State Pattern）
状态模式（State Pattern） 如果任务的执行过程是有多个不同状态的（比如初始化、运行中、完成等），你可以使用状态模式。每个状态可以有不同的行为，使得任务的状态管理更加清晰和可维护。 示例： …...
)
Linux网站搭建(新手必看)
1.宝塔Linux面板的功能 宝塔面板是一款服务器管理软件，可以帮助用户建立网站，一键配置服务器环境，使得用户通过web界面就可以轻松的管理安装所用的服务器软件。 2. 宝塔Linux面板的安装 宝塔官网地址：宝塔面板 - 简单好用的Linu…...
JavaEE进阶---Mybatis（预编译SQL即时SQL动态SQL标签池化技术说明）
文章目录 1.经典面试题（#{}和${}的区别）1.1关于#1.2关于$1.3情况下需要使用$ 2.数据库连接池2.1池化技术图解 3.动态SQL3.1if标签的使用3.2where标签的使用3.3set标签的使用 1.经典面试题（#{}和${}的区别） 1.1关于# 预编译SQL&a…...
Object.defineProperty（）Proxy详解（Vue23数据劫持实现）
底层原理👇🏿 总结一下，结构应该包括： 1. 方法的基本作用和参数。 2. 数据描述符和存取描述符的区别。 3. 属性定义的内部处理流程。 4. 在Vue中的应用实例。 5. 常见错误和正确实践。 每个部分都要结合搜索结果的信息&…...
网页的性能优化
面试中如何回答"前端性能优化"问题 在面试中回答性能优化问题时，建议采用结构化表达方式，展示你的系统化思维和实战经验。以下是一个推荐的回答框架： 1. 开场概述 “前端性能优化是一个系统工程，我通常会从加载性能、…...
Vue 3中的Teleport：超越组件边界的渲染
Vue 3引入了许多新特性，其中之一便是Teleport。它为开发者提供了一种强有力的方式来控制组件的渲染位置，使得我们可以将组件的内容“传送”到DOM树的任何地方，而不仅仅局限于其父级组件的边界内。这在创建模态框、通知系统或任何需要脱离当前…...
JVM垃圾回收笔记01-垃圾回收算法
文章目录 前言1. 如何判断对象可以回收1.1 引用计数法1.2 可达性分析算法查看根对象哪些对象可以作为 GC Root ?对象可以被回收，就代表一定会被回收吗？ 1.3 引用类型1.强引用（StrongReference）2.软引用（SoftReference…...
3.26学习总结
今天主要学习了内部类，但总感觉有点混乱，和之前的抽象啊，接口，多态等概念联系在一起感觉更混乱了，所以打算先把最近学的理清一遍，敲一遍代码再往后学...
京东--数据开发实习生--保险业务部门--一面凉经
Base： 本人投递的是后台开发岗位，调剂到数据开发岗位，京东的数据开发也做后台开发方面的工作，还包括算法、策略、数据挖掘和数据平台搭建之类的职责。面试内容基本只会问简历上的，在此基础上再去考察岗位职责相关的内…...
【Hugging Face 开源库】Diffusers 库 —— 扩散模型
Diffusers 的三个主要组件1. DiffusionPipeline：端到端推理工具__call__ 函数callback_on_step_end 管道回调函数 2. 预训练模型架构和模块UNetVAE（Variational AutoEncoder）图像尺寸与 UNet 和 VAE 的关系EMA（Exponential Moving…...
TypeScript（TS） 的使用初识
我将详细讲解 TypeScript（TS） 的使用。TypeScript 是由微软开发的一种开源编程语言，它是 JavaScript 的超集，通过引入静态类型和面向对象编程特性，增强了 JavaScript 的开发体验和代码质量。TypeScript 最终会被编译成…...
QTcpSocket多线程连接慢问题
20250325记录 环境：Qt5.14.2 64位 msvc编译 在多线程环境下，使用QTcpSocket实现客户端，发现在少部分电脑上，连接时间过长，定时器检查套接字状态时，发现连接处于QAbstractSocket::ConnectingState状态。 …...
Vue的实例
Every Vue application starts with a single Vue component instance as the application root. Any other Vue component created in the same application needs to be nested inside this root component. 每个 Vue 应用都以一个 Vue 组件实例作为应用的根开始。在同一个应…...
[AI绘图] ComfyUI 中自定义节点插件安装方法
ComfyUI 是一个强大的 AI 图像生成工具，支持自定义节点插件扩展其功能。本文介绍 ComfyUI 中安装自定义节点插件的三种方法，包括 Git Clone 方式、插件管理器安装方式，以及手动解压 ZIP 文件的方法，并分析它们的优缺点。 1. Git Clone 方法 使用 git clone 是最稳定且推荐…...
数据库第二周作业
数据库约束、常见语句等 数据库约束 主键约束 #创建表，把id设为主键 mysql> create table test02(-> id int primary key, #----主键约束-> name varchar(50)-> ); Query OK, 0 rows affected (0.02 sec) #插入数据测试 mysql> insert into te…...
Appium Inspector使用教程
1.下载最新版本 https://github.com/appium/appium-inspector/releases 2.本地启动一个Appium服务 若Android SDK已安装Appium服务，则在任意terminal使用appium启动服务即可 3.Appium Inspector客户端配置连接到Appium服务 Configuring and Starting a Session…...
【QT继承QLabel实现绘制矩形、椭圆、直线、多边形功能，并且支持修改大小，移动位置，复制，粘贴，删除功能】
文章目录 介绍绘制一个矩形（椭圆）roi绘制一个多边形roi对矩形roi的缩放：对多边形rio的缩放（移动点的位置） 介绍 绘制矩形，椭圆，直线实际用的都是是同一个思路：鼠标第一次点击就确定…...
Elasticsearch未授权访问漏洞
1、编辑elasticsearch.yml配置文件，添加认证相关配置 vim elasticsearch.ymlxpack.security.enabled: true xpack.license.self_generated.type: basic xpack.security.transport.ssl.enabled: true2、重启ElasticSearch # 重启方式可能略微不同 systemctl restar…...
怎么处理 Vue 项目中的错误的？
一、错误类型 任何一个框架，对于错误的处理都是一种必备的能力 在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。 主要的错误来源包括： 后端接口错误代码中本身逻辑错误二、如何处理 后端接口错误 通过axi…...
Elasticsearch原生linux部署集群 和docker部署集群
Easticsearch 是一个分布式的搜索和分析引擎，广泛应用于日志分析、全文检索、实时数据分析等场景。为了满足高可用性和高性能的需求，Elasticsearch 通常以集群的方式部署。部署 Elasticsearch 集群时，可以选择两种主要方式：原生 L…...
缓存设计模式
缓存设计模式（Cache Design Pattern）是一种用于存储和管理频繁访问数据的技术，旨在提高系统性能、降低数据库或后端服务的负载，并减少数据访问延迟。以下是几种常见的缓存设计模式，并用 Python Redis 进行示例代码实现…...
详解TCP的四次握手和三次挥手，以及里面每个阶段的状态
TCP 三次握手（连接建立） TCP 连接建立通过三次握手完成，确保双方同步初始序列号并确认可达性。 阶段说明 第一次握手 客户端 → 服务器：发送 SYN（同步请求），携带初始序列号 seq x。客户端状态…...
Linux文件目录管理指令详解（上篇）
Linux文件目录管理指令详解（上篇） 在Linux操作系统中，文件目录管理是基础且重要的技能。通过一系列指令，用户可以高效地浏览、创建、修改和删除文件及目录。本文将详细介绍Linux中常用的文件目录管理类指令，包括pwd、…...
BCC-应用程序组件分析
libbpf-tools/gethostlatency 追踪glibc中的getaddrinfo、gethostbyname、gethostbyname2函数用时 # /usr/share/bcc/libbpf-tools/gethostlatency TIME PID COMM LATms HOST 14:58:32 8418 curl 313.635 www.taobao.com以# cur…...
无参数读文件和RCE
什么是无参数？ 无参数（No-Argument）的概念，顾名思义，就是在PHP中调用函数时，不传递任何参数。我们需要利用仅靠函数本身的返回值或嵌套无参数函数的方式，达到读取文件或远程命令执行࿰…...
SpringMVC_day02
一、SSM 整合 核心步骤 依赖管理 包含 SpringMVC、Spring JDBC、MyBatis、Druid 数据源、Jackson 等依赖。注意点：确保版本兼容性（如 Spring 5.x 与 MyBatis 3.5.x）。 配置类 SpringConfig：扫描 Service 层、启用事务管理、导入…...
在Linux、Windows系统上安装开源InfluxDB——InfluxDB OSS v2并设置开机自启的保姆级图文教程
一、进入InfluxDB下载官网 InfluxData 文档https://docs.influxdata.com/Install InfluxDB OSS v2 | InfluxDB OSS v2 Documentation...
LinkedIn数据抓取零风险指南：亮数据住宅代理实现企业级合规采集
亮数据住宅代理实现企业级合规采集 一、前言二、尝试使用三、使用体验高效稳定易用性：合规与安全：技术支持： 四、适用场景五、推荐程度六、试用地址 一、前言 最近一位猎头小伙伴找到我，说目前很多公司的出海业务都在招人&#x…...
ROS2的发展历史、核心架构和应用场景
以下是对**ROS2（Robot Operating System 2）**的发展历史、核心架构和应用场景的详细解析，覆盖其技术演变、关键特性和生态系统： 一、ROS2的诞生背景：从ROS1到ROS2 1. ROS1的历史与局限 ROS1的起源： 2007年…...
PHP eval 长度限制绕过与 Webshell 获取
在 PHP 代码中，如果 eval($param); 存在且长度受限，并且过滤了 eval 和 assert，仍然可以通过多种方法绕过限制，获取 Webshell。 源码 <?php $param $_REQUEST[param]; if(strlen($param)<17 && stripos($param,…...
)
自然语言处理（14:处理时序数据的层的实现)
系列文章目录 第一章 1:同义词词典和基于计数方法语料库预处理 第一章 2:基于计数方法的分布式表示和假设，共现矩阵，向量相似度 第一章 3:基于计数方法的改进以及总结 第二章 1:word2vec 第二章 2:word2vec和CBOW模型的初步实现 第二章 3:CBOW模型…...
Pytest的Fixture使用
概述 Pytest中的Fixture可以使得测试代码高度复用，同时对资源进行安全的管理，以及在复杂的测试场景用进行灵活的组合。 概念 Fixture：可重用的函数，用@pytest.fixture来进行装饰，用于为测试提供数据、环境或者服务作用域：控制Fixture的生命周期，默认是function，可设置…...
【蓝桥杯】每日练习 Day13
前言 今天做了不少题，但是感觉都太水了，深思熟虑之下主播决定拿出两道相对不那么水的题来说一下（其实还是很水）。 两道问题，一道是日期问题（模拟），一道是区间合并问题。 日期差值 …...
Vue3 中使用 vuedraggable 实现拖拽排序功能，分组拖拽
Vue3 中使用 vuedraggable 实现拖拽排序功能，分组拖拽 安装draggable npm install vuedraggablenext --save基础用法示例 <template><div class"app-container"><draggable v-model"list" item-key"id":group"…...