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
相关推荐
浏览器爱好者14 分钟前
如何删除Google Chrome中的所有历史记录【一键清除】
前端·chrome
米开朗基杨16 分钟前
Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
前端·后端
Lonwayne17 分钟前
Web服务器技术选型指南:主流方案、核心对比与策略选择
运维·服务器·前端·程序那些事
brzhang30 分钟前
效率神器!TmuxAI:一款无痕融入终端的AI助手,让我的开发体验翻倍提升
前端·后端·算法
海底火旺32 分钟前
JavaScript 原型链检查:从 `instanceof` 到 `isPrototypeOf` 的演进
前端·javascript·面试
埃兰德欧神32 分钟前
Lynx:革新跨端开发,一次编写,多端闪耀
前端·javascript·前端框架
贾公子35 分钟前
详解 LeetCode 第 242 题 - 有效的字母组
前端
前端太佬41 分钟前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)
前端·微信·微信小程序
一抓掉一大把1 小时前
elementui日历显示红点及根据日程范围判断是否有红点
前端·javascript·elementui
前端.火鸡1 小时前
使用wavesurferJs实现录音音波效果
开发语言·前端·javascript