Vue3 Vite 中使用 vite-plugin-pwa 搭建 PWA 项目
原创
2023-03-29 06:57:25
10000+阅读
点赞
vite-plugin-pwa报错：Configure "workbox.maximumFileSizeToCacheInBytes" to change the limit
vue3项目中使用vite-plugin-pwa做serviceWorker
1. vite-plugin-restart
通过监听文件修改，自动重启 vite 服务。最常用的场景就是监听 vite.config.js 和 .env.development 文件，我们知道，修改 vite 配置文件和环境配置文件，是需要重启 vite 才会生效，通过这个插件，我们将从反复重启中解脱出来。安装npm i vite-plugin-restart -D配置：vite.config.
转载
2024-04-18 14:09:04
117阅读
1、插件配置
项目根目录新建vite.config.js
引入下载的插件,在plugins中使用
import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
(1)插件导入
export default defineConfig({
plugins: [
le
转载
2024-03-17 15:42:44
205阅读
vite项目（vue-ts）搭建常用插件引入方式vite-plugin-pagesvite-plugin-vue-layoutsvite-plugin-windicssunplugin-vue-componentsvite-plugin-pages作用vite-plugin-pages可以读取指定的目录文件，自动化生成路由信息，不需要自己去逐个页面配置注意1、vite-plugin-pages基于
转载
2024-01-03 06:20:34
355阅读
为了更好地量化Vite为项目带来的收益，固需要开发一个收集项目运行期间详细日志的Vite插件，此部分将介绍拦截debug日志能力的实现 ...
转载
2021-10-01 23:03:00
644阅读
2评论
最近在webpack项目里接入了Vite（dev mode），为开发提效。效果是真的猛。为了更好地量化收益，固需要开发一个收集项目启动，HMR，pageLoad等数据的Vite插件 ...
转载
2021-09-29 23:18:00
863阅读
2评论
vite-plugin-easy-mock 前言 开发项目时想要有个很容易mock本地数据的插件，只需要 vue.config.js 或 vite.config.js 中加载，然后按照规则即可使用mock数据，开启本地服务器则自动代理mock数据（可根据环境判断是否需要加载该插件），不需要开启额外的 ...
转载
2021-08-17 19:15:00
1273阅读
2评论
1. 依赖的安装 # 使用 npm 安装 npm install mockjs vite-plugin-mock -D # 使用 yarn 安装 yarn add mockjs vite-plugin-mock -D 2. 在 vite.config.js 中使用vite-plugin-mock插件 ...
转载
2021-08-24 14:32:00
6240阅读
2评论
vite-plugin-federation vite&rollup 模块联邦插件，和webpack 的模块联邦插件兼容模块联邦\
原创
2023-07-17 08:33:47
438阅读
以下是 vite-plugin-compression 插件的完整使用指南，涵盖安装、配置、实践及服务器部署要点，帮助您高效优化 Vite 项目的资源加载性能。? 一、安装插件npm install vite-plugin-compression --save-dev
# 或使用 yarn/pnpm
yarn add vite-plugin-compression -D
pnpm add vite
vite-plugin-mock 的核心功能是：提供本地 Mock 数据服务。它允许你在前端开发阶段，使用模拟的 API 数据来代替真实的后端接口，从而实现前后端并行开发。安装 vite-plugin-mock。
现在web开发变得更加美妙高效，在于开发工具设计得更好了，丰富性与易用性，都有所提高。丰富性带来了一个幸福的烦恼，就是针对实际应用场景，如何选择工具 ?1. Vue Cli和Vite之间的选择Vite的开发环境体验好，基于浏览器原生ES6 Modules提供的功能，不对ES高版本语法进行转译，省略掉耗时的打包流程， 可是考虑到：1) 项目要用到真机调试功能，开发环境下调试代码时不能使用ES高版本的
转载
2023-12-19 09:32:16
1893阅读
安装vite-plugin-svg-icons插件yarn add vite-plugin-svg-icons -D
yarn add fast-glob -D在vite.config.js文件中配置插件把配置插件中 //plugins: [vue(), ]
plugins: createVitePlugins(),完整内容import { defineConfig, loadEnv
原创
2024-03-16 00:15:05
1021阅读
1. what?①. PWA(渐进式网页应用/ProgressiveWebApp):
a. 是一种网页应用,可以离线使用、可以变成独立应用安装到系统中.
b. 非常的轻量,在多平台上面拥有一致的界面.
②. PWA可以在浏览器上访问,也可以单独安装成一个应用在系统上.(1). 各端的表现:①. Chrome:
a. 当Chrome检测到当前访问的网页支持PWA的时:
原创
2023-11-27 10:10:20
132阅读
PWA渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。之所以称为“渐进式”，是因为给网站架设 PWA 并不影响原有的网页（或者说不需要代码层面的重构），这是一个独立的功能，你可以选择性添加该功能。PWA 的主要作用：可以让网站安装到设备的主屏幕上，就像用户在 APP 商店下载应用后这个应用的图标会放在桌面上。PWA 不需要用户通过应用
转载
2023-07-23 23:08:33
1056阅读
在前端开发的世界中，Vite 一直以高速和高效著称。 如今，Vite 再次引领前沿，通过引入 MCP（Model Context Protocol）服务器，成功地将 AI 技术融入到构建工具中 MCP 服务器为 Vite 提供了关于 Vue 应用程序的组件树、状态、路由和 Pinia 状态等关键信息
vue3+vite+ts+element-plus+rollup-plugin-external-globals+vite-plugin-html，提高打包速度，提高网页打开速度
原创
2024-08-01 16:19:38
218阅读
