为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Vite入门：新手必读的简易教程

Vite入门：新手必读的简易教程

标签：
JavaScript 前端工具

本文介绍了Vite入门的相关内容，包括Vite的简介、安装步骤以及如何创建和配置第一个Vite项目。通过详细说明，帮助读者快速掌握Vite的使用方法和基本配置。文中涵盖了从安装到项目构建的全过程，旨在为开发者提供一个全面的Vite入门指南。

Vite简介与安装

Vite是什么

Vite 是由尤雨溪（Vue.js 创建者）团队开发的一个新的前端构建工具，它旨在提供更快的开发体验和更优化的构建速度。Vite 的核心理念是使用原生 ES 模块（而非 CommonJS 模块）来提供更快的冷启动速度。

Vite 的主要特点包括：

  1. 零配置启动：Vite 可以直接从零开始配置，无需复杂的配置文件。
  2. 更快的冷启动：Vite 通过原生 ES 模块支持，能够实现更快的冷启动速度。
  3. 开发环境和构建环境分离：在开发环境中，Vite 使用原生 ES 模块加载，而在构建环境中进行代码压缩和优化。
  4. 丰富的生态系统：Vite 社区中有大量的插件和工具，支持各种需求。

安装Vite

要开始使用 Vite，首先需要安装 Node.js 和 npm。如果你还没有安装，可以访问 Node.js 官网 下载最新版本。

接下来，安装 Vite：

  1. 全局安装 create-vite：

    npm install -g create-vite

    输出示例：

    /path/to/npm/bin/create-vite -> /path/to/npm/lib/node_modules/create-vite/dist/index.js
+ create-vite@1.0.0
  2. 安装 Vite CLI： 
    npm install -g vite

    输出示例：

    /path/to/npm/bin/vite -> /path/to/npm/lib/node_modules/vite/dist/cli.js
+ vite@1.0.0

安装完 Vite 后，可以通过 Vite 创建新的项目。

创建第一个Vite项目

  1. 使用 create-vite 命令创建项目： 
    create-vite my-vite-app

    输出示例：

    Creating a new Vite project at /path/to/my-vite-app
  2. 进入项目目录： 
    cd my-vite-app
  3. 安装依赖： 
    npm install

    输出示例：

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 697 packages from 329 contributors, 268 packages updated, 1 package removed
  4. 启动开发服务器： 
    npm run dev

    输出示例：

    vite:react-dev-server: vite v1.0.0-dev is running at:
vite:react-dev-server:    - http://localhost:5000/
vite:react-dev-server:  Colored terminal output is supported (Press 2 keys for light mode, 3 for dark, or any other key for default).
vite:react-dev-server:  Logs will be shown in the terminal below.

现在，你的 Vite 项目已经启动，并且可以在 http://localhost:5000 访问。

Vite基础配置

配置文件介绍

Vite 使用 vite.config.js 文件进行配置。这个文件位于项目根目录下，可以通过它来配置各种开发和构建选项。

以下是一个简单的 vite.config.js 文件示例：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5000,
    open: true,
  },
  build: {
    outDir: 'dist',
    minify: 'terser',
  },
});

常用配置项解析

服务器配置

  • port：设置开发服务器的端口号，默认是 3000。
  • open：设置启动服务器时是否自动打开浏览器，默认是 false。
  • host：设置服务器监听的 IP 地址，默认是 127.0.0.1。
  • cors：设置跨域资源共享（CORS）配置，默认开启。

构建配置

  • outDir：设置构建输出的目录，默认是 dist。
  • minify：设置构建时的压缩工具，默认使用 esbuild。
  • assetsDir：设置静态资源文件的输出目录。
  • chunkSizeWarningLimit：设置警告块大小的限制。

插件配置

  • plugins：添加插件，例如 Vue 插件、React 插件等。
文件加载与优化

模块解析与加载

Vite 使用原生 ES 模块来解析和加载文件。你可以直接在 HTML 文件中使用 <script type="module"> 来引入模块。

例如，在 HTML 文件中引入一个 JavaScript 模块：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="module" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/main.js"></script>
</body>
</html>

在 main.js 中使用 ES 模块导入其他模块：

import { add } from './utils';

console.log(add(1, 2));

代码分割和缓存

Vite 支持代码分割和缓存，以提高构建和加载速度。

代码分割

代码分割可以通过动态导入（Dynamic Import）实现。例如：

import('./moduleA.js').then((moduleA) => {
  console.log(moduleA.default);
});

缓存

Vite 会自动缓存构建后的文件，以减少重复构建的时间。你可以在 vite.config.js 中配置缓存相关选项：

export default defineConfig({
  cacheDir: 'node_modules/.vite',
});
开发环境配置

开发服务器设置

在开发过程中，Vite 提供了一个强大的开发服务器，可以进行热更新和诊断错误。

启动开发服务器

npm run dev

开发服务器配置

在 vite.config.js 中配置开发服务器：

export default defineConfig({
  server: {
    port: 5000,
    open: true,
    host: '0.0.0.0',
    cors: true,
  },
});

热更新功能

Vite 的热更新功能允许你在修改代码时自动刷新浏览器，而无需手动刷新页面。热更新功能默认开启，无需额外配置。

构建与部署

构建项目的基本命令

要构建项目，可以使用以下命令：

npm run build

构建完成后，生成的文件会输出到 dist 目录下。

构建配置项

在 vite.config.js 中配置构建选项：

export default defineConfig({
  build: {
    outDir: 'dist',
    minify: 'terser',
    assetsDir: 'static',
  },
});

如何部署到服务器

部署到服务器通常需要将构建后的文件上传到服务器，并配置服务器以正确运行这些文件。

上传文件到服务器

使用 FTP、SCP 或其他工具将 dist 目录的内容上传到服务器。

配置服务器

在服务器上配置 Web 服务器（如 Nginx 或 Apache）来服务静态文件。

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}
常见问题与解决方法

常见错误及解决

404 错误

如果你在开发过程中遇到 404 错误，可能是因为文件路径配置不正确。请检查 vite.config.js 中的配置和文件路径。

无法加载模块

如果遇到无法加载模块的错误，检查模块的路径是否正确，确保模块在正确的文件夹中。例如，确保模块路径正确：

import { add } from './utils';

工具与插件推荐

Vite 插件

  • @vitejs/plugin-vue：用于 Vue.js 项目的插件。
  • @vitejs/plugin-react：用于 React 项目的插件。
  • @vitejs/plugin-legacy：用于兼容旧版浏览器的插件。

其他工具

  • ESLint：用于代码质量检查。
  • Prettier：用于代码格式化。
  • TypeScript：用于类型检查。

这些工具和插件可以帮助你更好地管理和优化项目。

示例代码

变量与类型

在 JavaScript 中，变量和类型是基本概念。以下是一个简单的类型示例：

const num: number = 123;
const str: string = 'Hello, Vite!';
const bool: boolean = true;
const obj: object = { name: 'Vite', age: 20 };
const arr: number[] = [1, 2, 3];
const fn: (x: number) => number = (x) => x * 2;

模块导入

在 Vite 项目中，可以使用 ES 模块导入其他模块：

import { add } from './utils';

console.log(add(1, 2)); // 输出 3

动态导入

动态导入可以用于代码分割：

import('./moduleA.js').then((moduleA) => {
  console.log(moduleA.default); // 动态导入后使用
});

构建配置

配置构建输出目录和压缩工具：

export default defineConfig({
  build: {
    outDir: 'dist', // 输出目录
    minify: 'terser', // 压缩工具
  },
});

开发服务器配置

配置开发服务器的端口和自动打开浏览器：

export default defineConfig({
  server: {
    port: 5000, // 端口
    open: true, // 自动打开浏览器
  },
});

服务器配置

配置 Nginx 服务器以服务静态文件：

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

通过以上配置和示例，你可以更好地理解和使用 Vite 进行项目开发。希望本文能帮助你入门 Vite，并顺利进行开发。

点击查看更多内容
发表于 2024.10.08 14:24， 共 200 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

幕布斯6054654

手记
篇
粉丝
219
获赞与收藏
1011

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消