当前位置：首页 > news >正文

Vite 使用学习指南

news 2025/6/19 21:07:23

Vite 的基本概念和特点

Vite 是什么，它的主要特点是什么

Vite 是一个基于 ES modules 的前端构建工具，它的主要特点包括：

快速的冷启动：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间。
按需编译：Vite 可以根据需要动态地编译模块，而不是像传统的打包工具一样将所有模块都打包到一个文件中。
热更新：Vite 支持热更新，可以在开发时实时更新修改后的代码，提高开发效率。
插件化：Vite 支持插件化，可以通过插件扩展 Vite 的功能。
支持多种前端框架：Vite 支持多种前端框架，包括 Vue、React、Angular 等。

Vite 和传统的打包工具（如 webpack）有什么不同

Vite 和传统的打包工具（如 webpack）有以下不同点：

构建方式不同：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间，而 webpack 则是将所有模块打包到一个文件中。
编译方式不同：Vite 可以根据需要动态地编译模块，而不是像 webpack 一样将所有模块都打包到一个文件中。
热更新方式不同：Vite 支持热更新，可以在开发时实时更新修改后的代码，而 webpack 则需要重新编译整个应用才能看到修改后的效果。
插件化方式不同：Vite 支持插件化，可以通过插件扩展 Vite 的功能，而 webpack 则需要通过 loader 和 plugin 扩展其功能。
支持的框架不同：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。

总之，Vite 和 webpack 在构建方式、编译方式、热更新方式、插件化方式和支持的框架等方面都有所不同。Vite 更加轻量、快速、灵活，适合于开发小型应用和组件库，而 webpack 则更加适合于大型应用的构建和优化。

安装和配置 Vite

安装 Vite 可以通过 npm 或 yarn 进行安装。具体步骤如下：

打开终端或命令行工具，进入项目目录。
使用以下命令安装 Vite：
- 使用 npm 安装：npm install vite
- 使用 yarn 安装：yarn add vite
安装完成后，可以在 package.json 文件中查看 Vite 的版本信息。

注意：在安装 Vite 之前，需要确保已经安装了 Node.js 和 npm 或 yarn。

配置 Vite 的基本选项

vite.config.js 是 Vite 的配置文件，可以用来配置 Vite 的各种选项。以下是 vite.config.js 中可以配置的所有选项：

root：指定项目根目录，默认为当前工作目录。
base：指定应用部署的基础路径，默认为 /。
mode：指定应用的模式，可以是 development 或 production，默认为 development。
server：配置开发服务器的选项，例如端口号、代理等。
build：配置构建选项，例如输出目录、是否压缩代码等。
plugins：配置使用的插件。
resolve：配置模块解析选项，例如别名、扩展名等。
css：配置 CSS 相关选项，例如是否提取 CSS、是否压缩 CSS 等。
optimizeDeps：配置依赖优化选项，例如是否预构建依赖、是否忽略某些依赖等。
define：配置全局变量，可以在代码中使用。
esbuild：配置 esbuild 的选项，例如是否启用 JSX、是否启用 TypeScript 等。
alias：配置模块别名，可以简化模块路径。
logLevel：配置日志级别，可以控制日志输出的详细程度。
clearScreen：配置是否在每次构建前清空控制台输出。
emitAssets：配置是否输出构建产物。
rollupInputOptions：配置 Rollup 的输入选项。
rollupOutputOptions：配置 Rollup 的输出选项。

以上是 vite.config.js 中可以配置的所有选项，具体的使用方法可以参考 Vite 的官方文档。

使用 Vite 开发 Vue 应用

首先，安装 Vue CLI 和 Vite：

npm install -g @vue/cli
npm install -g vite

创建一个新的 Vue 项目：

vue create my-vue-app

cd my-vue-app
npm install --save-dev vite

修改 package.json 文件，添加以下脚本：

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

创建一个新的 Vue 组件：

<template><div><h1>{{ message }}</h1></div>
</template><script>
export default {data() {return {message: 'Hello, World!'}}
}
</script>

在 main.js 文件中引入该组件并挂载到 DOM 上：

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

运行项目：

npm run dev

打开浏览器并访问 http://localhost:3000，即可看到页面上显示的 “Hello, World!”。

使用 Vite 开发 React 应用

安装 Node.js 和 npm

首先需要安装 Node.js 和 npm，可以在官网下载安装包进行安装。

创建 React 应用

使用 create-react-app 命令创建 React 应用：

npx create-react-app my-app

安装 Vite

在项目根目录下执行以下命令安装 Vite：

npm install vite --save-dev

修改 package.json

在 package.json 文件中添加以下代码：

"scripts": {"start": "vite","build": "vite build"
}

修改 index.html

将 index.html 文件中的 script 标签修改为以下代码：

<script type="module" src="/src/index.js"></script>

创建 src/index.js

在 src 目录下创建 index.js 文件，并添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

运行应用

执行以下命令启动应用：

npm start

构建应用

执行以下命令构建应用：

npm run build

Vite 的高级用法

插件开发：Vite 提供了丰富的插件 API，可以通过编写插件来扩展 Vite 的功能，例如添加自定义的文件类型、自定义处理器、自定义中间件等。

自定义配置：Vite 的默认配置已经足够满足大部分项目的需求，但是对于一些特殊的需求，可以通过自定义配置来满足。例如，可以通过配置 alias 来简化模块的引入路径，可以通过配置 optimizeDeps 来优化依赖的打包方式等。

HMR（热更新）：Vite 内置了 HMR 功能，可以在开发过程中实现快速的热更新，而不需要刷新整个页面。在开发过程中，只需要修改代码，保存后即可看到修改后的效果，非常方便。

生产环境构建：Vite 不仅可以用于开发环境，还可以用于生产环境构建。在生产环境中，Vite 会自动进行代码压缩、混淆、分割等优化，以提高页面加载速度和性能。

vite 插件开发

创建一个vite实例：

import { createServer } from 'vite';const server = await createServer({// 配置项
});

获取vite实例的配置项：

const config = server.config;

获取vite实例的插件列表：

const plugins = server.plugins;

注册一个自定义插件：

server.config.plugins.push(myPlugin);

获取vite实例的中间件列表：

const middlewares = server.middlewares;

注册一个自定义中间件：

server.middlewares.use(myMiddleware);

构建项目：

import { build } from 'vite';const result = await build({// 配置项
});

配置别名

在项目根目录下创建一个vite.config.js文件。
在该文件中，使用defineConfig函数来定义Vite的配置选项。
在配置选项中，使用alias属性来配置别名。例如：

import { defineConfig } from 'vite';export default defineConfig({alias: {'@': '/src','components': '/src/components','utils': '/src/utils',},
});

上述代码中，我们定义了三个别名：@代表项目根目录下的/src目录，components代表/src/components目录，utils代表/src/utils目录。

在代码中使用别名。例如：

import MyComponent from '@/components/MyComponent';
import { formatDate } from 'utils/dateUtils';

上述代码中，我们使用了@别名来代表/src目录，使用components别名来代表/src/components目录，使用utils别名来代表/src/utils目录。