Vite 构建 Vue 3 项目教程（三）

admin
前端开发
3天前
6热度
0评论

Vite 是一款现代化的前端开发工具，通过利用浏览器的原生 ES 模块支持，提供了快速的开发体验。本文将详细介绍如何使用 Vite 创建和配置一个 Vue 3 项目，以及 Vite 的核心功能和配置选项。

为什么选择 Vite？

在 Vite 出现之前，前端开发通常依赖于 Webpack 等构建工具，这些工具虽然功能强大，但也存在一些痛点：

启动速度慢：项目越大，启动时间越长，严重影响开发效率。
热更新慢：每次修改代码后，都需要重新构建整个项目，导致热更新速度慢。
配置复杂：Webpack 等工具配置复杂，学习成本高。

Vite 解决了这些问题，具有以下优势：

极速启动：利用浏览器原生 ES 模块支持，无需打包，启动速度极快。
快速热更新：仅更新修改的模块，保持应用状态，提升开发效率。
丰富的功能：支持 TypeScript、JSX、CSS 等，开箱即用。
高度可扩展：通过插件系统，轻松集成其他工具和框架。

创建 Vite 项目

Vite 提供了多种方式来创建新项目，最简单的方式是使用命令行工具。以下是创建一个 Vue 3 项目的步骤：

打开终端或命令行工具，运行以下命令来创建一个新的 Vite 项目：
```
npm create vite@latest
```
按照提示输入项目名称并选择模板。Vite 提供了多种模板，包括：
- vanilla：纯 JavaScript 项目
- vue：Vue.js 项目
- react：React 项目
- preact：Preact 项目
- lit：Lit 项目
- svelte：Svelte 项目
本例中我们选择 vue 模板。
选择模板后，Vite 会自动创建项目目录并安装依赖。如果你不确定如何选择，可以直接按回车键接受默认值。

创建的项目通常包含以下文件和文件夹：

node_modules：存放项目依赖的文件夹。
public：存放静态资源的文件夹，例如图片、字体等。
src：存放项目源代码的文件夹。
- main.js：项目入口文件。
- App.vue：Vue 项目根组件。
index.html：项目首页。
package.json：项目配置文件，包含项目信息、依赖和脚本命令。
vite.config.js：Vite 配置文件，用于配置 Vite 的各种选项。

启动开发服务器

进入项目目录：
```
cd your-project-name
```
安装依赖：
```
npm install
```
运行以下命令启动开发服务器：
```
npm run dev
```

执行后，你会看到类似以下的输出：

VITE v6.2.0  ready in 684 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

Vite 会启动一个本地开发服务器，并打印出访问地址，例如 http://localhost:5173。打开浏览器访问该地址，即可看到你的 Vite 项目。

修改代码并查看效果

打开 src/App.vue 文件，修改代码并保存文件。你会发现浏览器会自动刷新，并显示修改后的效果。这是 Vite 的热更新（HMR）功能在起作用。

Vite 启动流程

在 package.json 中定义了启动脚本：

"scripts": {
  "dev": "vite"
}

执行 npm run dev 命令后，npm 会查找本地 node_modules/.bin/vite 可执行文件，调用这个文件，启动开发服务器。Vite 的启动过程核心步骤如下：

读取配置：默认读取根目录下的 vite.config.js 或 vite.config.ts。配置包括 root、alias、插件、端口等。
解析依赖：扫描 src/main.js（或 src/main.ts）作为入口文件，对 ES 模块进行依赖分析，对导入路径（如 @/components/Hello.vue）进行别名解析。
启动开发服务器：创建一个 HTTP 服务器，默认端口 5173，提供热更新（HMR）能力，将 Vue 文件、JS/TS、CSS 等通过内置的 Vite 插件转换成浏览器可识别的代码。

文件调用顺序（以典型 Vue3 项目为例）

npm run dev
    ↓
vite 命令执行
    ↓
读取 vite.config.js
    ↓
扫描入口文件 src/main.js / src/main.ts
    ↓
main.js 导入 App.vue 和 router/store 等
    ↓
App.vue -> template + script + style 分别由 Vite Vue 插件处理
    ↓
浏览器请求资源时，Vite 进行按需编译和模块缓存
    ↓
页面呈现，支持 HMR 热更新

关键点

入口文件：main.js 或 main.ts，Vue 应用的起点。
模块解析：Vite 使用 esbuild 快速处理 JS/TS，并处理 Vue 单文件组件。
别名解析：@ 对应 src/，在 vite.config.js 中通过 resolve.alias 配置。
热更新：修改 .vue 文件或 JS/TS 文件时，Vite 会局部更新模块而不刷新整个页面。

Vite 常用功能

Vite 提供了丰富的功能，可以帮助你更高效地开发前端应用。

1. 使用 CSS 预处理器

Vite 支持使用 Sass、Less、Stylus 等 CSS 预处理器。要使用这些预处理器，你需要先安装相应的依赖：

Sass：
```
npm install -D sass
```
Less：
```
npm install -D less
```
Stylus：
```
npm install -D stylus
```

安装完成后，你可以在项目中使用相应的 CSS 预处理器。例如，在 Vue 项目中，你可以使用 <style lang="scss"> 来编写 Sass 代码。

2. 使用 TypeScript

Vite 支持使用 TypeScript 编写代码。要使用 TypeScript，你需要先安装 TypeScript：

npm install -D typescript

安装完成后，你可以将 .js 文件重命名为 .ts 文件，并使用 TypeScript 语法编写代码。Vite 会自动编译 TypeScript 代码。

3. 使用静态资源

Vite 支持使用图片、字体等静态资源。你可以将这些资源放在 public 目录下，或者使用 import 语句导入资源。

使用 public 目录：将图片 logo.png 放在 public 目录下，然后在代码中使用 /logo.png 引用图片。
使用 import 语句：
```
import logo from './assets/logo.png';
```

4. 使用环境变量

Vite 支持使用环境变量来配置不同的环境。你可以使用 .env 文件来定义环境变量。

创建 .env 文件：
```
VITE_API_URL=https://api.example.com
```

在代码中使用环境变量：

const apiUrl = import.meta.env.VITE_API_URL;

5. 使用插件

Vite 拥有丰富的插件生态系统，可以帮助你扩展 Vite 的功能。你可以使用 Vite 插件来实现代码压缩、图片优化、代码分析等功能。

安装插件：
```
npm install -D vite-plugin-xxx
```

配置插件：在 vite.config.js 文件中配置插件：

import xxx from 'vite-plugin-xxx';

export default {
  plugins: [
    xxx()
  ]
};

Vite 配置文件详解

vite.config.js 是 Vite 项目的核心配置文件，通过配置 vite.config.js，你可以自定义 Vite 的各种行为，例如开发服务器、构建选项、插件等。以下是一个 vite.config.js 配置示例：

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

export default defineConfig({
  // 项目根目录，默认为当前工作目录
  root: path.resolve(__dirname, './src'),

  // 基础路径，用于部署在子路径时使用
  base: '/my-app/',

  // 开发服务器配置
  server: {
    // 指定开发服务器端口
    port: 3000,

    // 是否自动打开浏览器
    open: true,

    // 配置代理服务器，用于解决跨域问题
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // 构建配置
  build: {
    // 指定输出目录
    outDir: path.resolve(__dirname, '../dist'),

    // 指定静态资源目录
    assetsDir: 'static',

    // 是否生成 sourcemap 文件
    sourcemap: true,

    // 是否压缩代码
    minify: 'terser', // 使用 terser 进行代码压缩

    // 配置 Rollup 选项
    rollupOptions: {
      // 配置外部依赖
      external: ['lodash'],

      // 配置输出格式
      output: {
        manualChunks: {
          // 将 lodash 单独打包
          lodash: ['lodash']
        }
      }
    }
  },

  // 插件配置
  plugins: [
    // 使用 Vue 插件
    vue()
  ],

  // 模块解析配置
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },

  // CSS 配置
  css: {
    // 配置 CSS 预处理器选项
    preprocessorOptions: {
      scss: {
        // 全局注入 SCSS 变量
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },

  // 环境变量配置
  envPrefix: 'VITE_' // 环境变量前缀，默认为 VITE_
});

配置项说明

root：指定项目的根目录，默认为当前工作目录。这里设置为 ./src，表示项目源代码放在 src 目录下。
base：指定项目的基础路径，适用于项目部署在子路径的情况。例如，如果项目部署在 https://example.com/my-app/，则设置为 /my-app/。
server：开发服务器配置：
- port：指定开发服务器的端口号。
- open：是否在启动开发服务器时自动打开浏览器。
- proxy：配置代理服务器，用于解决跨域问题。例如，将 /api 开头的请求代理到 http://localhost:8080。
build：构建配置：
- outDir：指定构建输出的目录。
- assetsDir：指定静态资源（如图片、字体）的存放目录。
- sourcemap：是否生成 sourcemap 文件，便于调试。
- minify：是否压缩代码，terser 是默认的压缩工具。
- rollupOptions：配置 Rollup 打包选项，例如外部依赖和代码分割。
plugins：配置 Vite 插件。这里使用了 @vitejs/plugin-vue 插件，用于支持 Vue 项目。
resolve.alias：配置路径别名。例如，将 @ 映射到 src 目录，方便在代码中引用。
css.preprocessorOptions：配置 CSS 预处理器选项。例如，全局注入 SCSS 变量文件。
envPrefix：配置环境变量的前缀。默认情况下，Vite 只会加载以 VITE_ 开头的环境变量。

项目结构解析

一个标准的 Vue 3 项目通常可以拆分成三层：

项目根目录：构建工具与工程配置
public 目录：不参与构建的静态资源
src 目录：几乎所有业务代码都在这里，平时开发基本在这个目录里面。

典型的 Vue 项目结构如下：

vue-project/
├── public/                  # 静态资源，直接复制到构建输出目录
│   └── favicon.ico          # 网站图标
├── src/
│   ├── assets/              # 静态资源（如图片、字体、CSS）
│   │   └── logo.png
│   ├── components/          # 可复用的通用组件
│   │   └── CommonHeader.vue
│   ├── composables/         # 可复用的 Composition API 逻辑（可选）
│   │   └── useFetch.js
│   ├── router/              # 路由配置
│   │   └── index.js
│   ├── stores/              # Pinia 状态管理（或 store/ 用于 Vuex）
│   │   └── index.js
│   ├── utils/               # 工具函数（如请求封装、格式化）
│   │   └── request.js
│   ├── views/               # 页面级组件（对应路由页面）
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue              # 根组件
│   └── main.js              # 入口文件（创建 Vue 应用）
├── index.html               # HTML 入口模板
├── vite.config.js           # Vite 配置文件
├── package.json             # 项目依赖与脚本
├── .gitignore               # Git 忽略文件
├── .env                     # 环境变量（开发）
├── .env.production          # 环境变量（生产）
└── README.md                # 项目说明

目录解析

路径	描述
public/	存放不会被构建工具处理的静态资源，直接复制到 dist 目录，常用于 favicon、robots.txt 等
public/favicon.ico	网站图标（favicon）
src/	项目源代码主目录，所有开发代码
src/assets/	存放静态资源，如图片、字体、CSS 等
src/components/	可复用的通用组件
src/composables/	可复用的 Composition API 逻辑（可选）
src/router/	路由配置
src/stores/	Pinia 状态管理（或 store/ 用于 Vuex）
src/utils/	工具函数，如请求封装、格式化等
src/views/	页面级组件，对应路由页面
src/App.vue	根组件
src/main.js	入口文件，创建 Vue 应用
index.html	HTML 入口模板
vite.config.js	Vite 配置文件
package.json	项目依赖与脚本
.gitignore	Git 忽略文件
.env	环境变量（开发）
.env.production	环境变量（生产）
README.md	项目说明

通过以上步骤和配置，你可以快速搭建一个高效的 Vue 3 项目。Vite 的强大功能和灵活配置将帮助你在开发过程中更加得心应手。希望本文对你有所帮助，祝你开发愉快！