- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
vite
分享一个前端开发与构建工具vite，官网： https://vitejs.cn/ 可以以极快的方式冷启动项目，极快的速度热重载HMR(Hot Module Replacement) 使用方式按照官方文档创建项目即可 https://vitejs.cn/guide/#scaffolding-your-first-vite-project
41720编辑于 2022-08-21 - 来自专栏全栈开发工程师
【Vite基础】003-Vite 中使用 TypeScript
【Vite基础】003-Vite 中使用 TypeScript 一、Vite 天生支持 ts 1、只编译，不校验 在开发环境中，Vite 使用 es build ，es build 本身支持 ts 语法 第四步：结论 vite 支持 ts 语法，只编译，可直接使用，但不校验！ build 改为 tsc --noEmit && vite build { "name": "vite-vue3", "private": true, "version": "0.0.0 & vite build { "name": "vite-vue3", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && tsc --noEmit && vite build",
74020编辑于 2025-01-06 - 来自专栏技术社区
Vite简介
Vite是一个快速、轻量级的前端构建工具，它可以让开发者更高效地进行前端开发。相比于其他构建工具，Vite的特点在于快速的冷启动、模块热替换和按需编译等功能。 下面我们将详细探讨Vite的优势和如何使用它。 什么是Vite Vite是一款基于Rollup的构建工具，主要用于构建Web应用程序和库。 Vite的优势 快速的冷启动 Vite采用了服务端渲染的方式，不需要像其他构建工具那样预先编译打包所有的JS文件。 这意味着，每当您修改代码时，Vite只会重新构建所修改的那部分代码，而不会重新构建整个应用程序。因此，Vite的冷启动非常快，几乎没有任何延迟。 模块热替换 Vite支持模块热替换（HMR），这使得在开发过程中对代码进行调试变得非常方便。当您修改代码时，Vite会自动重新加载该模块，而不是刷新整个页面。
1.4K20编辑于 2023-06-04 - 来自专栏与前端沾边
Vite 学习（四） - vite 插件开发预学习
vite 插件需要兼容 rollup 和 esbuild 的插件机制，虽然 vite 兼容大部分 rollup 插件，但不是所有钩子都支持，本小节介绍下 vite 中的钩子及插件开发流程。 我们自己开发的 vite 插件命名规则也保持 vite-plugin-xxx 格式。 modulePased 钩子 打包钩子和输出钩子间没有强耦合， output 阶段的钩子不会执行 vite 独有的钩子 config 返回对象，合并到 vite.config.js 中配置中。 normal vite 核心插件执行后，build 执行前执行执行 post vite build 之后，代码构建执行后执行，例如代码打包大小、时间分析工具 // 插件执行是个函数，传参 plugins 中插件钩子和热更新操作做了介绍，和 rollup 开发的不同及注意事项，下一节我们开始实现一个 vite 插件，具体了解每个钩子的使用，如果有问题欢迎留言，谢谢阅读！
2.4K40编辑于 2022-02-19 - 来自专栏前端小叙
vite配置别名
vite.config.ts import { resolve } from "path"; export default defineConfig({ resolve: {
1.8K40编辑于 2023-02-10 - 来自专栏愧怍的技术学习与分享
Vite使用WebWorker
准备给我的一个 Vite 项目进行重构，其中一个功能(函数)要花费 JS 主线程大量时间，会导致主线程画面卡死，无法正常点击，直到该功能(函数)执行完毕而言。 综合以上限制，我所要重构的功能面临以下问题 一些 window 下的函数，或者主线程下全局数据函数，无法共同 无法读取本地文件，需要创建网络文件（如 Blob 或 Vite 导入） Worker 线程和主线程通信要使用 所以在考虑使用 Worker 的时候就要考虑这个功能是否值得使用 Worker，能否使用 Worker 实现 Vite 中使用 WebWorker 这里先给出我的最优解，在 Vite 中静态资源处理 console.log('test.worker.js', e.data) self.postMessage('hello from worker') }, false, ) 不过 Vite
2.3K10编辑于 2022-12-27 - 来自专栏全栈开发工程师
【Vite基础】004-Vite 中处理静态资源
【Vite基础】004-Vite 中处理静态资源 一、types 类型 1、url 路径 概述 获取导入文件的路径。 test); export default defineComponent({ setup() { return () =>
Hello Vite test); export default defineComponent({ setup() { return () =>Hello Vite26310编辑于 2025-01-06来自专栏腾讯新闻前端团队wp2vite ~ 让webpack项目支持vite
/tnfe/wp2vite why vite 在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。 github: https://github.com/tnfe/wp2vite npm: https://www.npmjs.com/package/wp2vite 如果有人不知道webpack 和vite 前段时间写过一篇vite解析和尝试的一篇文章 ,在文章最后，舔狗了一下："vite,真香"。 安装与使用 关于wp2vite的安装，与其他命令行工具安装是一样的： npm install -g wp2vite or yarn global add wp2vite 使用的话，其实是非常简单的，一个特别特别简单的工具 此时开始为项目创建vite所需的配置，包括package.json里面增加vite相关scripts和devDependencies、vite.config.js的创建、HTML的提取和写入等。
1.3K131发布于 2021-08-18来自专栏前端自习课【Vite】1934- Vite打包性能优化以及填坑
前言 最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。 复制代码<head> <%- vuescript %> </head> css 复制代码import { createHtmlPlugin } from 'vite-plugin-html' 图片压缩 bash 复制代码yarn add vite-plugin-imagemin -D or bash 复制代码npm i vite-plugin-imagemin -D js 复制代码import 上述配置在vite4.0版本生效，如需升级，请前往官方迁移文档。 坑2 Uncaught TypeError: Failed to resolve module specifier "Vue". 配置 js 复制代码// vite.config.js import { defineConfig } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html
3K11编辑于 2024-01-23来自专栏友人a的笔记丶Vite该如何使用？Vite学习笔记，持续记录
5.vite使用PostCss Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。 另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。 例如下面这个文件中： VITE_SOME_KEY=123 DB_PASSWORD=foobar 只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY } } Vite实用插件 1.vite-plugin-restart 作用：通过监听文件修改，自动重启 vite 服务。
5K20编辑于 2023-02-17来自专栏js笔记vite2
vite.js官网地址 创建项目 切记，目录中不要带有中文，会报错 npm init @vitejs/app //需要输入项目名称 //例如 demo-app demo-app //进入文件夹 cd /demo-app //安装依赖 npm install //启动项目 npm run dev vite配置 插件的方式 使用vue/react vite.config.js export default ": resolve("src/styles"), }, plugins: [vue()] } defineConfig可规范类型 import { defineConfig } from 'vite "抛出的事件"); }, //父组件中 <template> //组件实例 <HelloWorld @myClick="handleMyClick" msg="Hello Vue 3 + <em>Vite</em>
32310编辑于 2022-10-25来自专栏下落木Vite真香之路
当前 Vite 的优点不止于此，这篇文章不探讨 Vite 的优势，只记录下从 Vue-CLI 转 Vite 踩的一些坑。 还有 Vite 只暴露以 VITE_ 开头的环境变量给客户端，Vue-CLI 中是 VUE_APP_ 开头。 对应的处理如下，通过 define 替换全局变量，这种方式目前来看是安全的。 import { loadEnv } from 'vite'; const ENV_PREFIX = ['VITE_', 'VUE_APP']; export default ({ mode, serverProxy 插件众多，这里用的是vite-plugin-externals。 那怎么办呢，很简单，在使用JSX的script的地方加上： <script lang="jsx"> 然后在vite.config.js中，为vite-plugin-vue2这个插件增加jsx: true
3.1K31编辑于 2022-12-13来自专栏前端小叙vite配置vite-plugin-style-import插件后启动报错
<anonymous> (/Users/wangping/project/vite-vue3-ts-learn/vite.config.ts:29:39) at Module. <computed> [as .ts] (/Users/wangping/project/vite-vue3-ts-learn/node_modules/vite/dist/node/chunks/dep 附插件文档：https://github.com/vbenjs/vite-plugin-style-import
1.9K20编辑于 2022-05-09; } }); 第三步：运行和访问 六、css 预处理 css pre-processors 1、概述 Vite 天生支持！; } }); 第四步：运行并访问 二、Vite 推荐使用原生的 css variable vue3 支持最新的 css 语法！Vite 集成了 postcss 的功能！ color: red; /* 使用 */ background-color: var(--main-bg-color); } 第二步：运行与访问 三、使用 postcss 特性 1、概述 Vite 2、代码演示 第一步：修改 vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'来自专栏全栈开发工程师【Vite基础】002-Vite 中使用 CSS 的各种功能
【Vite基础】002-Vite 中使用 CSS 的各种功能 一、Vite 原生支持 CSS 1、概述 可直接使用 css ！
60610编辑于 2025-01-06 - 来自专栏Web 技术
Vite 原理浅析
Vite 直接整合了 Rollup，为用户提供了完善、开箱即用的解决方案，在需要bundle打包的时候Vite 使用 Rollup 内置配置。 Vite 核心原理 Vite其核心原理是利用浏览器现在已经支持ES6的import,碰见import就会发送一个HTTP请求去加载文件。 启动热更新：createWebSocketServer: 在 Vite dev server 启动之前，Vite 会为 HMR 做一些准备工作：比如创建websocket服务，利用chokidar创建一个监听对象 预编译原理 Vite预编译之后，将文件缓存在node_modules/.vite/文件夹下。根据以下地方来决定是否需要重新执行预构建。 vite/文件夹。
1.1K20编辑于 2023-10-07 - 来自专栏向治洪
Vite开发快速入门
一、Vite简介 Vite (法语意为 “快速的”，发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。 除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。 1.1 Vite组成 Vite构建工具由两部分组成： 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如模块热更新（HMR）。 总的来说，Vite希望提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性。 不过，相比Vue-cli配置来说，Vite构建的项目还是有很多的配置需要开发者自己进行处理。 1.2 浏览器支持 开发环境中：Vite需要在支持原生 ES 模块动态导入的浏览器中使用。
75051发布于 2021-08-10 - 来自专栏前端小兵成长营
Vite - 搭建 React 项目
前言 日常放鸽，火钳刘明 这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。 创建一个 Vite 项目 yarn create @vitejs/app ? 完结撒花 “如果不行的话，直接看 vite 官网，它比我写的详细 ” ---- 改造工程 但上述只是一个基础的 React demo，在实际开发项目中，是远远不够的，需要额外做一些项目配置 目录约定 根据日常的开发习惯 依赖主入口 ├── .env // 环境变量配置 ├── vite.config.ts // vite 配置选型，具体可以查看官网 其他配置 这里主要是关于 vite.config.ts 的配置，对项目整体做一些附加配置。 from 'vite-plugin-imp' export default defineConfig({ plugins: [ reactRefresh(), vitePluginImp
1.5K20发布于 2021-04-09 - 来自专栏网络安全技术点滴分享
Awesome Vite.js - 精选Vite.js资源大全
项目标题与描述Awesome Vite.js 是一个精选的Vite.js相关资源集合，旨在为开发者提供全面的Vite.js生态系统参考。 ：提供从Vite v4迁移的官方指导文档持续更新：跟随Vite.js官方版本保持内容同步更新安装指南本项目为资源集合，无需安装。 但包含多种Vite项目初始化工具：基础Vite项目：npm create vite@latestTailwindCSS项目：npm create vitawind@latestElectron项目：npm create electron-vite@latest使用说明快速创建Vite项目使用官方脚手架工具：npm create vite@latest my-vite-app --template vue ，但包含重要的脚手架工具链接：## Get Started- [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite
21910编辑于 2025-08-14 - 来自专栏夏天的前端笔记
vite基本配置教程
最近做项目要求将webpack打包方式换成vite，下面将详细讲解一下配置vite需要修改哪些文件，以及过程中踩到的奇葩坑。 viteconfig.js文件，里面是vite配置。 中默认是VITE_。 比如loadEnv(‘abc’, process.cwd(), 'ENV'); //引入vite扩展插件 const { createVuePlugin } = require('vite-plugin-vue2 配置，以及在这个文件里面还添加了些其他的vite依赖项 "scripts": { "serve": "vite", "build": "vite build", "lint":
1.2K10编辑于 2024-01-18 - 来自专栏coldPlayer的前端专栏
对vite的理解
对vite的理解快速的冷启动"快速的冷启动"指的是在开发过程中，当你启动应用程序或重新启动开发服务器时，Vite 能够迅速加载应用程序。 具体来说，Vite 的预解析包括以下步骤：1、静态分析：Vite 会对项目的源码进行静态分析，解析模块之间的依赖关系。它会查找 import 和 export 语句，分析模块的引用关系。 vite打包原理Vite 在开发阶段通过浏览器原生的 ES 模块加载器直接加载源码文件，并实现了即时的热模块替换。 Vite 使用 Rollup 进行构建，但与传统的 Rollup 打包方式不同，Vite 仅处理入口文件，并根据模块的依赖关系生成优化的代码块（Code Splitting）。 Vite 通过预先解析和缓存模块的依赖关系，可以避免不必要的文件扫描和重新编译，提高了构建速度。Vite 会根据需要对代码进行转换和优化，例如压缩代码、处理静态资源等。
59070编辑于 2023-11-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号