tag vite

標籤
貢獻42
90
05:55 PM · Oct 25 ,2025
xiaohe0601 頭像 fenanjiu 頭像 tanking 頭像 nulidexiaocongmang 頭像 chengxuyuanyouyage 頭像 shuirongshui 頭像 carloslab 頭像 xiaodaigua_ray 頭像 kanade_5c75f6aec71cb 頭像 meetqy 頭像 jrainlau 頭像 hooray 頭像

@vite / 博客 RSS 訂閱

shuirongshui 頭像

水冗水孚 - 效能工具（八）之vite開發或生產環境下的命令行變量傳參（比如啓動項目時多視圖選擇其一）

需求描述 前段時間有這樣的一個需求： 筆者有一個項目，在啓動或者打包的時候 需要根據一些實際情況，去選擇展示那個視圖 就是我們在項目啓動或者打包的時候，需要注入一個全局變量（保存在.env.development或.env.production文件中）通過命令行npm run dev的方式 一般來説，vue-router就可以實現這個需求 但是，某些情況下，這個需求不太適合用vue-

node.js , vite , vue3

收藏 評論

honwhy 頭像

Honwhy - 使用wxt開發跨瀏覽器插件

一、背景 在使用@crxjs/vite-plugin一段時間後，開發發了welibrary等圖書館插件，為了進一步推廣插件計劃支持Chrome、Edge瀏覽器之外的Firefox，為此耗費了不少時間用於調整配置，初步結論如下， 1）Firefox對mv2版本支持更多，mv3版本有諸多限制，@crxjs/vite-plugin等工具打包後的產物可能無法運行 2）雖然Firefox支持chrome全局

vue.js , chrome , vite , chrome-extension

收藏 評論

kestrel_task 頭像

微芒不朽 - Vue3開發技巧：使用jsx快速開發組件

創建項目 pnpm create vite 直接使用模板創建 pnpm create vite my-vue-app --template vue 安裝 JSX 支持依賴 cd my-vue-app npm install @vitejs/plugin-vue-jsx -D 配置 vite.config.js import { defineConfig } from 'vite' import v

vite , jsx , vue3 , 前端 , Javascript

收藏 評論

lxlu 頭像

肥皂泡 - vite+vue3+element-plus自定義主題變量的配置説明

先上配置，具體參數後面説 vite.config.ts 文件 // vite.config.ts import { defineConfig } from 'vite' import ElementPlus from 'unplugin-element-plus/vite' // 用於 API 組件樣式 import Components from 'unplugin-vue-components

vite , vue3 , element-plus

收藏 評論

xiaohe0601 頭像

xiaohe0601 - 👋 一起寫一個基於虛擬模塊的密鑰管理 Rollup 插件吧（一）

在現代 Web 應用開發中，密鑰的使用幾乎是不可避免的，無論是加解密本地敏感數據、調用第三方 SDK 還是網絡請求籤名等場景都需要用到密鑰。 如何相對安全、靈活地管理密鑰一直是一個令人頭疼的問題，我們既希望在開發環境可以方便地修改、調試和注入密鑰，又不希望這些密鑰在構建產物中被明文暴露，以免被有心之人輕鬆獲取。 通常情況，我們會先手動將密鑰通過特定的算法混淆拆分成多份放入源碼中，運行時再通過逆運算

插件 , vite , rollup , typescript , 前端

收藏 評論

shuirongshui 頭像

水冗水孚 - 以React+Vite為例實現web項目版本發佈後，通知用户刷新頁面獲取最新資源

需求技術選型 1. 純前端實現——前端輪詢方案 原理：前端定時（如每一分鐘）發送請求（如請求version.json文件），對比本地存儲的版本號與服務器返回的版本號，若不一致則提示更新。 優點：實現簡單（無需後端複雜邏輯，僅需一個靜態版本文件），兼容性極好（所有瀏覽器支持）。 缺點：實時性差有延遲（依賴輪詢間隔）。 適用場景：小型項目、對實時性要求低（如非高頻更新的工具類網站）、快速迭代

react , vite , Nginx , Javascript

收藏 評論

xiaohe0601 頭像

xiaohe0601 - 👋 一起寫一個基於虛擬模塊的密鑰管理 Rollup 插件吧（四）

上一章 我們成功將插件遷移到 Unplugin 插件系統，使其同時支持 Vite、Rollup、Webpack、Esbuild 等多種構建工具，讓更多用户都能輕鬆體驗到我們基於虛擬模塊的密鑰管理方案。 然而，儘管我們的插件功能已經完整實現，但是在未來的迭代過程中仍然存在潛在風險。插件可能因為版本更新、構建工具差異或者代碼修改而出現功能迴歸、虛擬模塊解析異常或類型聲明生成不正確等問題。 為了確保插件

插件 , vite , rollup , typescript , 前端

收藏 評論

zuozuomuyi_62edd9a3dce06 頭像

Name6 - 實現一個打包時將CSS注入到JS的Vite插件

前言 Vite 在2.0版本提供了Library Mode（庫模式），讓開發者可以使用Vite來構建自己的庫以發佈使用。正好我準備封裝一個React組件並將其發佈為npm包以供日後方便使用，同時之前也體驗到了使用Vite帶來的快速體驗，於是便使用Vite進行開發。 背景 在開發完成後進行打包，出現瞭如圖三個文件： 其中的style.css文件裏面包含了該組件的所有樣式，如果該文件單獨出現的話，意

vite , plugin , typescript , 前端 , Javascript

收藏 評論

lion_jv 頭像

lion - 解決 Vite 項目中 Android 8.1.0 設備 Promise.allSettled 失效問題

問題背景 在開發基於 Vite 的 Web 應用時，使用 Promise.allSettled 方法時發現，在部分舊版安卓設備（如小米8，Android 8.1.0）上運行時，控制枱報錯 TypeError: Promise.allSettled is not a function。該問題導致應用功能異常，影響用户體驗。 受影響的設備環境 設備：小米8（Android 8.1.0） 瀏覽器/

瀏覽器兼容性 , vite , Android

收藏 評論

shellingfordly 頭像

shellingfordly - Vele-Admin 一個基於Vue3+Element-Plus的後台管理系統

vele-admin 介紹 vele-admin是一個基於 vue3, vite2, element-plus, vuex-module-decorators, vue-router-next, typescript 的後台管理系統 倉庫 Github vele-admin 預覽 vue3-element-plus-admin瀏覽地址 依賴 Vue3 Vue-Router-Next V

mock.js , vite , vue3 , element-plus , typescript

收藏 評論

kanade_5c75f6aec71cb 頭像

kanade - react + vite + testing-library單測環境構建

業務複雜多變迭代快速，加上編寫單測其實是耗費一定時間去做的，可能很多人認為編寫單元測試是一件吃力不討好的事兒，不會在項目中主動的去做單元測試，一兩年前筆者也是這樣的一種心態，對於單測嗤之以鼻，但是隨着看的書多了，學習的東西多了，明白了單測可有有效的保證我們一些核心功能的正確性，同樣可以反推我們的設計一些通用功能是否全面，再者也可以在我們改動一些功能後，校驗原有功能的正確性，説這麼多，還需要大家自己

react , vite , jest

收藏 評論

xiaohe0601 頭像

xiaohe0601 - 👋 一起寫一個基於虛擬模塊的密鑰管理 Rollup 插件吧（三）

上一章 我們為插件實現了對 TypeScript 的支持，通過在插件中引入 dts 配置項自動生成 crypto-key.d.ts 聲明文件，讓用户在開發過程中無需手動維護類型定義文件，就能獲得準確的類型提示和更流暢的 IDE 體驗。 可行性分析 為了讓插件能夠被更多的用户使用，我們希望可以同時支持 Vite、Rollup、Webpack、Esbuild 等構建工具，所以本章我們將會一起把插件從單

插件 , vite , rollup , typescript , 前端

收藏 評論

zcf0508 頭像

zcf0508 - unplugin-https-reverse-proxy 2.0 發佈：革新移動端調試體驗

大家好！我是 unplugin-https-reverse-proxy​ 的作者。去年，我曾分享如何利用這一工具解決本地前端開發中的鑑權難題，讓開發者能在本地開發服務器上使用測試環境域名輕鬆調試需要登錄態的應用。通過搭建中間搭理服務器，unplugin-https-reverse-proxy​ 消除了手動複製 cookie 和修改 host 的繁瑣步驟，顯著提升了團隊協作開發的效率。 點擊閲讀 提

vite , 前端

收藏 評論

ihengshuai 頭像

大衞talk - 前端主流構建工具

本文首發博客網站，由於圖片和格式解析問題，可前往閲讀原文 隨着前端開發複雜度的提升，構建工具在開發流程中扮演着越來越重要的角色。這些工具可以幫助開發者實現代碼的打包、優化、轉譯、模塊化處理等功能，從而提升開發效率和用户體驗。本文將以當前主流的前端構建工具為核心，介紹它們的特點、適用場景及差異 構建工具 Grunt Grunt 是較早期的任務運行工具，主要通過任務（tasks）系統自動化完成前端開發

vite , nx.dev , rust , webpack , 前端

收藏 評論

fenanjiu 頭像

南玖 - 深入瞭解Vite：依賴預構建原理

前言 前面我們有提到Vite在開發階段，提倡的是一個no-bundle的理念，不必與webpack那樣需要先將整個項目進行打包構建。但是no-bundle的理念只適合源代碼部分（我們自己寫的代碼），vite會將項目中的所有模塊分為依賴與源碼兩部分。 依賴： 指的是一些不會變動的一些模塊，如：node_modules中的第三方依賴，這部分代碼vite會在啓動本地服務之前使用esbuild進行預構建。

vite , 工程化 , 原理 , 前端

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - 主打一個“小巧靈動”：Vite + Svelte

作者：來自 vivo 互聯網大前端團隊- Wei Xing 在研發小型項目時，傳統的 Vue、React 顯得太“笨重”。本文主要針對開發小型項目的場景，談談 Vite+Svelte 是如何讓項目變得“小巧靈動”，並橫向對比 Svelte 和 Vue 的性能表現，對二者的加載流程做詳細分析。 一、背景 為了統一技術標準、提升協作效率，通常在前端團隊內部只會保留一套通用的研發框架。尤其是在團隊初創時

svelte , vite , 性能

收藏 評論

jueqiangqingtongsan 頭像

倔強青銅三 - Vite VS Webpack，誰才是最強構建工具

Vite VS Webpack，誰才是最強構建工具 前言 大家好，我是倔強青銅三。是一名熱情的軟件工程師，我熱衷於分享和傳播IT技術，致力於通過我的知識和技能推動技術交流與創新，歡迎關注我，微信公眾號：倔強青銅三。 Vite vs Webpack：哪個更適合您的項目？ 隨着Web應用的不斷髮展，對更快、更高效的開發工具的需求也在日益增長。多年來，Webpack一直是複雜應用的首選打包工具，以其強

vue.js , vite , webpack , 前端 , Javascript

收藏 評論

refanbanzhang 頭像

熱飯班長 - 最好的svg使用方案（個人覺得）

方案1：img 將svg作為img的src import icon from './xxx.svg' img :src="icon" 無法很好的自定義尺寸，圖片會模糊（使用了img後，會喪失svg的特性） 無法指定顏色 方案2：插件 添加vite-svg-loader插件 找了好幾個常見的插件，比如vite-plugin-svg-icons、vite-plugin-svg-loader、u

react , vue.js , vite , HTML , svg

收藏 評論

mosong 頭像

墨鬆 - VitePress、Hexo、Docusaurus，哪個最適合你的靜態網站？

在選擇合適的靜態網站工具時，Hexo、VitePress、Docusaurus 是三個備受關注的選項，那麼到底哪一個框架更適合你呢？ 本文從使用場景、社區生態、功能、性能、擴展性這五個方面，幫你全方位分析各個框架的優缺點，以便為你的技術選型提供參考。 1、應用場景 Hexo, 官方定位自己是 "快速、簡潔且高效的博客框架" , 但是它同樣適合構建簡單的文檔網站，它具有簡單易用的特點，適合那些

vite , 網站 , 文檔 , vitepress , 前端

收藏 評論

shenyongweiwudemaozi 頭像

sAkuraOfficial - 記錄react+electron開發單頁應用SPA遇到的路由問題

遇到的問題 在electron-vite提供的開發服務器中，electron能正常顯示頁面中的路由並能正常跳轉. 而在build打包後，雙擊運行electron應用，路由失效，顯示空白頁面 排查BUG 閲讀了腳手架為我生成的主函數代碼： // HMR for renderer base on electron-vite cli. // Load the remote URL for

react , vite , electron , router

收藏 評論

zxl20070701 頭像

zxl20070701 - 從零開始搭建 Vue3 組件庫開發環境

搭建開發環境 Vite初始化 新建一個空的文件夾，比如叫 Vue3UI ，然後使用命令行在此文件夾下使用npm初始化： npm init 回車後，我們再安裝vite（我們這裏選擇使用Vite進行打包，使用別的也類似）： npm install --save-dev vite 根目錄創建 index.html 文件，裏面內容如下： !DOCTYPE html html lang="zh-cn"

vue.js , vite , component , 前端 , ui

收藏 評論

fenanjiu 頭像

南玖 - Vite本地構建：手寫核心原理

前言 接上篇文章，我們瞭解到vite的本地構建原理主要是：啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想，我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目： 項目結構如上，服務使用koa搭建，bin指定cli可執行文件的位置 #!/usr/bin/env node

vite , 工程化 , 前端 , Javascript

收藏 評論

chenqiwen 頭像

陳其文 - 如何禁止async編譯成generator？

這是很小的一件事。 但是我花了至少兩個小時的時間。 起因是這樣的： 我需要一個異步函數的原型 const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor 這個原型是用來生成 new AsyncFunction(str)的。 運行環境下，一點問題都沒有。 但是打包出來，總是報錯。 因為new AsyncFun

ecmascript-6 , async-await , vite , generator , build

收藏 評論

fenanjiu 頭像

南玖 - 淺析Vite本地構建原理

前言 隨着Vue3的逐漸普及以及Vite的逐漸成熟，我們有必要來了解一下關於vite的本地構建原理。 對於webpack打包的核心流程是通過分析JS文件中引用關係，通過遞歸得到整個項目的依賴關係，並且對於非JS類型的資源，通過調用對應的loader將其打包編譯生成JS 代碼，最後再啓動開發服務器。 瞭解到webpack的耗時主要花費在打包上，Vite選擇跳過打包，直接以以 原生 ESM 方式提供源

vite , 工程化 , 前端

收藏 評論