【vue3|第22期】Vite + Vue3：打造高效的前端开发体验

日期：2024年8月9日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

---

在现代前端开发领域，开发者们一直在追求更快的构建速度和更流畅的开发体验。Vite，作为一款新型的前端构建工具，正在逐渐成为开发者的新宠。本文将带你深入了解 Vite 的核心概念，并在 Vue3 项目中应用 Vite，最后我们将详细探讨如何配置vite.config.ts。

二、 Vite 简介

---

Vite（法语意为“快”）是一个由原生 ES 模块提供支持的现代前端开发与构建工具。它利用浏览器的原生模块加载特性，提供了极速的开发体验。以下是 Vite 的几个核心概念：

• 原生 ES 模块
  Vite 允许开发者使用ES模块的 import 语法进行开发，这意味着浏览器可以直接解析模块，无需打包过程。

• No Bundle 开发服务器
  在开发模式下，Vite 无需打包，可以直接启动开发服务器，极大地提高了启动速度。

• 按需编译
  Vite 采用按需编译的策略，只有当请求某个模块时，才会进行编译，减少了不必要的编译工作。

• 热模块替换（HMR）
  Vite 提供了快速且精准的 HMR，当文件更新时，只会重新编译更新的模块，从而实现快速反馈。

• 插件系统
  Vite 的插件系统基于 Rollup，易于扩展和定制。

三、 在 Vue3 中使用 Vite

---

下面，我们将通过一系列步骤，在 Vue3 项目中应用 Vite。

1、安装 Node.js

首先，确保你的系统安装了 Node.js。Vite 需要 Node.js 环境来运行。

2、创建 Vue3 + Vite 项目

使用以下命令创建一个新的 Vue3 + Vite 项目：

npm create vite@latest my-vue-app -- --template vue

该命令会创建一个名为my-vue-app的新目录，并使用Vue模板初始化项目。

3、进入项目目录

cd my-vue-app

4、安装依赖

npm install

5、运行开发服务器

npm run dev

启动 Vite 开发服务器后，通常在几秒钟内即可完成。

6、项目结构

初始化后，项目的基本结构如下：

my-vue-app/
├── public/
│   └── images
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.ts(也可以是main.js)
├── .gitignore
├── index.html
├── package.json
└── vite.config.ts (也可以是vite.config.js)

四、 配置 vite.config.ts

---

vite.config.ts 是Vite项目的核心配置文件。在这个文件中，你可以配置 Vite 的构建过程、开发服务器选项、环境变量、插件等。

1、基础配置

import { defineConfig } from 'vite';

export default defineConfig({
  // 基本路径
  base: '/',

  // 服务器选项
  server: {
    host: '0.0.0.0', // 指定服务器主机名
    port: 3000, // 指定服务器端口
    open: true, // 在服务器启动时自动打开浏览器
    cors: true, // 为开发服务器配置 CORS
  },

  // 构建选项
  build: {
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    sourcemap: true, // 构建后是否生成 source map 文件
    minify: 'terser', // 指定压缩方式，'terser' 或 'esbuild'
  },

  // 插件配置
  plugins: [
    // 插件实例化
  ],

  // 路径解析配置
  resolve: {
    alias: {
      '@': resolve(__dirname, '/src'),
    },
  },

  // 环境变量文件目录,默认为 ./env ，可以不需要配置的
  envDir: './env',
});

2、常用参数说明

• base: 基本路径，用于项目部署到非根路径时。
• server: 服务器配置，包括端口、主机、代理等。
• build: 构建配置，包括输出目录、资源目录、source map、压缩等。
• resolve: 路径解析配置，可以配置别名等，便于在项目中引用模块。
• css: CSS 相关配置，如预处理器、模块化等。
• plugins: 插件数组，用于扩展 Vite 功能，例如添加 Vue 插件以支持 .vue 文件。
• envDir: 环境变量文件目录，用于指定环境变量文件的存放位置。

3、配置 vite.config.js 示例

以下是一个更详细的 vite.config.js 配置示例，包括了路径别名、环境变量、插件等配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  // 基本路径配置
  base: '/my-app/', // 假设项目部署在 /my-app/ 路径下
  // 服务器选项配置
  server: {
    host: '0.0.0.0', // 指定服务器主机名
    port: 8080, // 修改默认端口
    open: true, // 在服务器启动时自动打开浏览器
    cors: true, // 为开发服务器配置 CORS
  },
  // 路径解析配置
  resolve: {
    alias: {
      // 设置路径别名
      '@': resolve(__dirname, 'src'),
      // 可以添加更多别名
    },
  },
  // 构建选项配置
  build: {
    outDir: 'dist', // 指定输出目录
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    sourcemap: true, // 构建后是否生成 source map 文件
    minify: 'terser', // 指定压缩方式，'terser' 或 'esbuild'
    // 其他构建配置
  },
  // 插件配置
  plugins: [
    vue(), // 使用 Vue 插件
    // 可以添加更多插件
  ],
  // CSS 配置
  css: {
    preprocessorOptions: {
      // 配置预处理器选项
      scss: {
        additionalData: `$injectedColor: orange;`,
      },
    },
  },
  // 环境变量配置
  envDir: './env', 

});

在这个配置文件中，我们设置了项目的基本路径、服务器选项、路径别名、构建配置、插件配置以及 CSS 预处理器选项。我们还指定了环境变量文件的目录，这样可以在不同的环境中使用不同的配置。

五、结语

---

Vite 为 Vue3 提供了一个快速、高效的开发体验。通过上述步骤和配置，你可以轻松地在 Vue3 项目中集成 Vite，并根据自己的需求定制项目配置。Vite 的插件系统和灵活的配置选项使得它能够适应各种不同的开发场景，从而帮助开发者提升工作效率。
随着前端技术的不断发展，Vite 已经成为许多开发者日常开发工作的一部分。掌握 Vite 的配置和使用，将有助于你更好地利用现代前端工具，提升项目的开发效率和质量。

---

参考文章：

• 《Vite 官方中文文档》
• 《Vite》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/141128882