vite基本知识

vite的了解与使用

基本知识

开发时,并不对代码打包,而实直接采用ESM的方式运行项目一

项目部署时,再对项目进行打包

核心原理

其核心原理是利用浏览器现在已经支持ES6import,碰见import就会发送一个HTTP请求去加载文件

使用vite运行项目时,首先会用esbuild进行预构建,将所有模块转换为 ESM,不需要对我们整个项目进行编译打包,Vite 启动一个服务器,在浏览器需要加载某个模块时,它会拦截这些请求,根据请求进行按需编译,(服务器拦截对 *.vue 文件的请求,即时编译它们,然后将它们作为 JavaScript 发回)然后返回给浏览器。

特点

快速的冷启动:采用No Bundleesbuild预构建,速度远快于Webpack,Esbuild 使用 Go 语言编写,JS 本质上是单线程语言,GO 语言天生具有多线程的优势

高效的热更新:基于ESM实现,同时利用HTTP头来加速整个页面的重新加载,增加缓存策略:源码模块使用协商缓存,依赖模块使用强缓存

基于 Rollup 打包:生产环境下使用Rollup进行打包(目前rollup比较成熟,esbuild虽然快,但有些功能还在开发中)

简单上手体验

Vite 要求 Node.js 版本 >= 12.0.0

快速构建一个项目

 npm init vite@latest
# npm 6.x
npm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue

pnpm来初始化一个项目

pnpm create vite
然后按照提示完成项目的初始化:
输入项目名称
选择框架类型
选择语言类型

下面其实就和上面一样,只是一开始就将项目名称给定好了

pnpm create vite my-vue-app -- --template vue

构建命令

vite:启动开发服务器

vite build:为生产环境构建产物

vite preview:本地预览生产构建产物

  "scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},

插件

和webpack类似, npm i 之后,在config文件中引入并使用

eg:legacy是一个语法转换的插件

import legacy from "@vitejs/plugin-legacy";
export default defineConfig({plugins: [legacy({targets: ["defaults", "IE 11"],}),],
});

环境变量与模式

.env文件

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载,但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载,但会被 git 忽略

import.meta.env 对象上暴露环境变量

只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

在 .env.development定义一个 VITE_APP_TITLE=‘开发环境的标题’,在 .env.test中赋值 VITE_APP_TITLE=‘测试环境的标题’,在 .env.production中赋值 VITE_APP_TITLE=‘生产环境的标题’

VITE_APP_TITLE='开发环境的标题'  

在vue文件中通过import.meta.env 就可以使用了:

const title = import.meta.env.VITE_APP_TITLE

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/229477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开源 LLM 微调训练指南:如何打造属于自己的 LLM 模型

一、介绍 今天我们来聊一聊关于LLM的微调训练,LLM应该算是目前当之无愧的最有影响力的AI技术。尽管它只是一个语言模型,但它具备理解和生成人类语言的能力,非常厉害!它可以革新各个行业,包括自然语言处理、机器翻译、…

【经典LeetCode算法题目专栏分类】【第4期】BFS广度优先算法:单词接龙、最小基因变化、二进制矩阵中的最短路径

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能AI、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 一般涉及到最小层数问题…

PyTorch自动梯度计算(注意点)

if params.grad is not None: params.grad.zero_() 我们实际的运算往往会涉及到若干个requires-grad为true的张量进行运算,在这种情况下,Pytorch会计算整个计算图上的损失的导数,并把这些结果累加到grad属性中。多次调用backward()会导致梯度…

京东体育用品销售数据分析与可视化系统

京东体育用品销售数据分析与可视化系统 前言数据爬取模块1. 数据爬取2. 数据处理3. 数据存储 数据可视化模块1. 数据查看2. 店铺商品数量排行3. 整体好评率4. 不同品牌市场占比5. 品牌差评率排名6. 品牌价格排名7. 品牌评论数量分布 创新点 前言 在体育用品行业,了…

pythonUnitTest框架

UnitTest框架 UnitTest参考文章:https://blog.csdn.net/qq_54219272/article/details/123265794 目标(看完UnitTest框架该有的收获) 掌握UnitTest框架的基本使用方法掌握断言(判断实际结果和预期结果是否一致)的使用方…

uniapp与vue的区别

Uniapp和Vue是两个相关但不完全相同的概念。 Uniapp是一个基于Vue.js的跨平台框架,用于开发多端应用,包括小程序、H5、App等。它通过使用Vue的语法和组件化开发模式,实现了一套代码可以在多个平台上运行的能力。Uniapp提供了一系列的API和组…

[Verilog] Verilog 数据类型

主页: 元存储博客 文章目录 前言1. bit 类型2. reg 类型3 wire类型4 integer类型5 real类型6 parameter类型7 enum类型8 array 类型9 向量类型10 time 类型11 string 类型 前言 在 Verilog 中,有几种不同的数据类型可以用于声明和操作变量。 在 Verilo…

系列十、存储引擎

一、存储引擎 1.1、概述 大家可能没有听说过存储引擎,但是一定听过引擎这个词,引擎就是发动机,是一个机器的核心组件。 比如,对于舰载机、直升机、火箭来说,它们都有各自的引擎,引擎是它们最为核心的组件。…

攻防世界--easyphp

浅学一下吧~ 发开题目是这样的 最烦的就是代码审计&#xff0c;还是看得少 多审计两篇代码就好了&#xff08;还是因为自己会的不多&#xff09; <?php highlight_file(__FILE__);//将当前文件的源代码进行高亮显示 $key1 0;//将变量$key1的值初始化为0 $key2 0;//将变量…

第一个程序(STM32F103点灯)

点亮LED 看原理图确定控制LED的引脚看主芯片手册确定如何设置/控制引脚写程序 LED有很多种&#xff0c;像插脚的&#xff0c;贴片的。 它们长得完全不一样&#xff0c;因此我们在原理图中将它抽象出来。 嵌入式系统中&#xff0c;一个LED的电阻非常低&#xff0c;I U/R&…

Flink系列之:Flink 1.8.0 中的状态 TTL:如何在 Apache Flink 中自动清理应用程序状态

Flink系列之&#xff1a;Flink 1.8.0 中的状态 TTL&#xff1a;如何在 Apache Flink 中自动清理应用程序状态 一、状态的瞬态性质二、用于持续清理应用程序状态的状态 TTL三、倒垃圾四、保持完整状态快照干净五、堆状态后端的增量清理六、RocksDB 后台压缩以过滤掉过期状态七、…

12.5,12.15AVL树更新,定义,插入

定义平衡因子为右子树高度减去左子树高度 AVL树插入分为两步&#xff1a; 按照二叉搜索树的方式插入新节点调整平衡因子 对于平衡因子的调整&#xff0c;在插入之前&#xff0c;所有节点的平衡因子分为三种情况&#xff1a;0&#xff0c;1&#xff0c;-1插入后&#xff0c;新…

EasyExcel 简单导入

前边写过使用easyexcel进行简单、多sheet页的导出。今天周日利用空闲写一下对应简单的导入。 重点&#xff1a;springboot、easyExcel、桥接模式&#xff1b; 说明&#xff1a;本次使用实体类student&#xff1a;属性看前边章节内容&#xff1b; 1、公共导入service public …

ArkTS编译时遇到arkts-no-obj-literals-as-types错误【Bug已解决-鸿蒙】

文章目录 项目场景:问题描述原因分析:解决方案:解决方案1解决方案2此Bug解决方案总结项目场景: 在开发鸿蒙项目过程中,遇到了arkts-no-obj-literals-as-types,总结了自己和网上人的解决方案,故写下这篇文章。 遇到问题: rkTS编译时遇到arkts-no-obj-literals-as-type…

【数据结构】(二叉树)计算结点|叶子结点|高度|第K层结点数

目录 概念&#xff1a; 特殊的二叉树 二叉树的性质 二叉树的存储结构 二叉树的创建 二叉树遍历 前序&#xff1a; 中序&#xff1a; 后序&#xff1a; 计算结点数 计算叶子结点数 计算树的高度&#xff08;深度&#xff09; 计算第K层结点数 概念&#xff1a; 一颗…

PVE系列-防火墙的免费安静之旅IPfire

Ventoy一款引导盘可以引导各种启动盘安装盘的工具https://www.ventoy.net/cn/index.html 在它的兼容iso的列表 中发现了Ipfirehttps://wiki.ipfire.org/ &#xff0c;本来用着openwrt也挺好&#xff0c;忍不住的虚拟机尝了尝鲜&#xff0c;发现的功能有2&#xff0c; 安全吧&a…

虚拟化之安全虚拟化

虚拟化首次引入是在Armv7-A架构中。那时&#xff0c;Hyp模式&#xff08;在AArch32中相当于EL2&#xff09;仅在非安全状态下可用。当Armv8.4-A引入时&#xff0c;添加了对安全状态下EL2的支持作为一个可选特性。 当处理器支持安全EL2时&#xff0c;需要使用SCR_EL3.EEL2位从E…

React 表单与事件

大家好&#xff0c;欢迎来到 React 表单与事件课程。在这一课中&#xff0c;我们将学习如何在 React 中使用表单和事件。 表单 在 HTML 中&#xff0c;表单元素用于收集用户输入。在 React 中&#xff0c;表单元素与其他 DOM 元素有所不同&#xff0c;因为它们会保留一些内部…

linux文件打包和压缩

7.2 文件打包和压缩 7.2.1 tar tar&#xff08;英文全拼&#xff1a;tape archive &#xff09;命令用于备份文件。 ​ tar 是用来建立&#xff0c;还原备份文件的工具程序&#xff0c;它可以加入&#xff0c;解开备份文件内的文件。 ​ tar命令是Unix/Linux系统中备给文件的…

NetSuite 智能商品推荐(Intelligent Recommendations)

本周在一个客户环境里&#xff0c;发现销售订单中有个Intelligent Recommendations的按钮。 本以为是客户新装的一个SuiteApp&#xff0c;仔细研究一下发现还不是。是个我们忽略的一个内建新功能。 Intelligent Recommendations&#xff0c;是2023.1版本推出的新功能。主要目的…