本示例基于vite-plugin-html插件,实现多个独立项目共存,共享组件和依赖,运行、打包互不干扰。 npm create vite@latest 兼容性注意 Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本 虽然创建项目用的14.17.5版本,但是后面运行项目用的18.15.0 HTML模板插件 npm i vite-plugin-html -D #vite.config.t...
在初始化的项目中 vite.config.js 只是引入了提供 Vue 3 单文件组件支持的 plugin,接下来推荐一些优秀的 vite-plugin,更多 plugin 详见 awesome-vite。 @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持。因为 vite 是基于现代浏览器支持的 ESM 机制,所以构建后文件模块仍是 ESM,如果需要支持旧版浏...
vue版本:3.2.47 需要引入新的开发依赖: yarnaddvite-plugin-html -D 修改vite.config.ts文件配置 ...// @ts-ignoreimport{ createHtmlPlugin }from"vite-plugin-html";exportdefault({ mode }:ConfigEnv):UserConfig=>{// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所...
vite.config.ts: import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import vueDevTools from 'vite-plugin-vue-devtools' import { visualizer } from 'rollup-plugin-visualizer'...
️ vite-plugin-html-template 由于我们需要同时支持 Webpack 和 Vite，在处理我们最终输出的 html 的...
vue3-template-admin是一款基于vue3 + vite + element plus的后台管理模版,它集成了我们业务开发的大部分功能,比如文本编辑器,全站搜索,权限管理,可视化图表等。 使用到的插件/库 eslint-plugin-vueeslint-plugin-vue axios强大的前端请求库 fues.jsfues.js 前端模糊搜索 ...
vue3-vite-elementplus-admin 管理系统快速开发模板 基于Vue3.0前端开发框架和 ElementPlus UI框架,并使用由Vue 作者尤雨溪的前端工程化工具Vite进行构建。与Webpack相比,Vite极大的缩短了开发打包和热更新的效率。 此模板可用于现代化管理系统的初始开发模板,可节省一些重复性的工程初始化搭建工作。
在根目录找到vite.config.ts(js),并做如下修改 importlegacyfrom'@vitejs/plugin-legacy';plugins:[legacy({targets:['defaults','not IE 11']}),vue()], 执行打包 修改打包后的文件 image.png 参考我最终的index.html实现: image.png 此时点击dist/index.html ,发现可以在浏览器正常预览内容了,再将最终的...
1 从 Vite 开始 1.1 什么是 Vite?Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能]，如速度快到惊人的 模块热更新（HMR）。一套构建指令，它使用 Rollup 打包...
Vue3 + Vite 中使用 vite-plugin-pwa 搭建 PWA 项目 由于项目需要离线访问,并在桌面创建快捷方式启动。本文将介绍 Vue3 + Vite 使用 vite-plugin-pwa 搭建 一个 PWA 项目。 第一步:创建Vue3项目 按照Vue官网提示,默认安装 (注意:在相应位置输入你的项目名称)...