文章摘要： Vite是一种新型前端构建工具，能够显著提升前端开发体验。

  • 前置依赖：NodeJS和npm

注释

构建工具的作用是：

  • 模块化开发：支持直接从node_modules里引入代码。
  • 处理代码兼容性：语法降级、语法转换
  • 提高项目性能：压缩文件、代码分割。
  • 热更新：监听文件的变化，自动调用对应的集成工具进行重新打包，再让浏览器重新运行。
  • 开发服务器：跨域问题。
  • Vite 内置dotenv依赖，能够读取.env环境变量文件。

打包

  • 将代码交给构建工具进行编译处理的过程叫做打包，打包完成以后会得到一个浏览器可以认识的文件。

简介

Vite是一种新型前端构建工具，能够显著提升前端开发体验。

  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

作用

  • 不同的第三方包会有不同的导出格式（这个是vite没法约束别人的事情）。
  • 对路径的处理上可以直接使用.vite/deps，方便路径重写。
  • 网络多包传输的性能问题。

下载vite-cli

  • 此处下载项目预设，实现快速搭建项目。
npm init vite@latest

使用插件

Vite 可以使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。这意味着 Vite 用户可以利用 Rollup 插件的强大生态系统，同时根据需要也能够扩展开发服务器和 SSR 功能。

添加插件

若要使用一个插件，需要将插件添加到npm的package.json的devDependencies属性中，

依赖预构建

静态资源处理

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

目录结构

project/
|-- dist            # 构建，编译文件
|-- node_modules/   # 当前项目的npm仓库
|-- public/         # 
|-- src/            # 代码文件
 |-- assets/
 |-- components/
 App.vue     # 主vue组件
 main.js     # 主js代码
 style.css   # 主css样式
index.html      # 启动入口
package-lock.json   # npm依赖版本记录
package.json        # npm配置文件
vite.config.js      # vite配置文件

命令

可以通过配置npm的package.json配置来使用vite的可执行文件。

  • vite：启动开发服务器
  • vite build：为生产环境构建（编译）产物。
  • vite preview：本地预览生产构建（编译）产物。

指定配置文件

  • 可以显式(手动指定)地通过 --config 命令行选项指定一个配置文件。
vite --config config.js

环境变量

环境变量文件分类：

  • .env：公共环境变量
  • .env.development：开发环境变量
  • .env.production：生产环境变量

注释

  • vite框架中的dotenv依赖会读取.env环境变量文件到程序中。
  • 可以通过import.meta.env方法来获取.env文件中的变量。
  • 例子：import.meta.env.MODE来获取应用的运行模式。

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

  • import.meta.env.MODE: {string} 应用运行的模式。
  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

配置文件

配置文件解析

当以命令行方式运行 vite 时，Vite 会自动解析项目根目录下名为 vite.config.js 的文件。

基本配置文件基本内容如下：

// vite.config.js
export default {
  // 配置选项
}

配置智能提示

// 提供语法提示
import { defineConfig } from 'vite'  // 提供语法提示的函数

export default defineConfig({
 // ...
})

语法提示的处理

  • 导入import { defineConfig } from 'vite就能够提供语法提示。

环境变量的处理

  • 创建vite.base.config.js、vite.dev.config.js、vite.prod.config.js

环境变量

{import.meta.env.BASE_URL}
{}

cache

es modul的规范 vite是什么东西 vite的基本安装和使用 vite的编译结果 vite编译结果的分析 vite的配置文件 vite处理css、静态资源 vite的插件和插件的使用 vite与ts的结合 vite的构建原理

更新时间: