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
相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript