vue进阶——Vite

一、简述

1. 什么是Vite？

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在 功能指南 中了解 Vite 的各种可能性。通过 插件，Vite 支持与其他框架或工具的集成。如有需要，您可以通过 配置部分 自定义适应你的项目。

2. 为什么选择Vite？

1. 极速开发体验：Vite 提供了非常快速的开发体验，支持快速的热模块替换（HMR），在修改代码时可以立即看到更新，无需等待重新构建。这大大加速了开发周期，提高了开发效率。

2. 快速构建：Vite生成高效的生产构建，采用了现代构建的最佳实践，如按需加载、预构建和Tree-shaking，以确保生成的包尺寸小而性能高。这有助于提高应用的加载速度和运行性能。

3. Vue 3 集成：Vite最初是为 Vue 3 开发的，因此它提供了紧密集成的 Vue 3 支持，包括Composition API。如果你使用 Vue.js 来开发应用，Vite是一个理想的选择，因为它与 Vue 3 配合得非常好。

4. ES 模块支持：Vite鼓励以 ES 模块（ESM）的方式开发应用，这意味着你可以直接引用 npm 包，而无需特殊的构建工具。这有助于减少构建和编译的复杂性，使项目更容易维护。

5. 插件系统：Vite具有灵活的插件系统，允许开发者扩展其功能，以满足特定项目的需求。社区提供了许多官方和第三方插件，可以加速开发过程并提供更多功能。

6. 多页应用支持：Vite支持多页应用的构建，允许你创建多个入口点和页面，以满足复杂应用的需求。

3. Vite和Webpack的区别

1. 开发服务器和热模块替换（HMR）：

• Vite：Vite内置了一个快速的开发服务器，利用 ES 模块（ESM）加载模块，支持快速的热模块替换（HMR）。在修改代码时，可以立即看到更新，无需等待重新构建。

• Webpack：Webpack也支持热模块替换，但相对来说，它的开发服务器通常需要更多配置，并且不如Vite的开发服务器快速。Webpack通常需要更长的构建时间。

2. 构建性能：

• Vite：Vite的构建速度非常快，因为它使用了现代的构建技术，如按需加载和预构建。它通过ESM加载模块，只编译和构建实际使用的代码。

• Webpack：Webpack通常需要更长时间来进行完整的构建，因为它会编译整个项目，包括未使用的模块。尽管Webpack有优化策略，但构建速度相对较慢。

3. 模块化开发：

• Vite：Vite鼓励以ESM的方式开发应用，这意味着你可以直接引用npm包，而无需特殊的构建工具。这有助于减少构建和编译的复杂性。

• Webpack：Webpack使用CommonJS和AMD等模块系统，通常需要使用loader来处理npm包的导入。

4. 插件系统：

• Vite：Vite具有灵活的插件系统，允许开发者扩展其功能，以满足特定项目的需求。社区提供了许多官方和第三方插件。

• Webpack：Webpack也有强大的插件系统，但配置更复杂，一些插件可能需要额外的配置和调整。

5. 多页应用支持：

• Vite：Vite支持多页应用的构建，允许你创建多个入口点和页面。

• Webpack：Webpack也支持多页应用，但需要更多的配置和管理

二、使用

1. 创建

兼容性注意：
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

//npm
$ npm create vite@latest

//yarn
$ yarn create vite

//pnpm
$ pnpm create vite

过程中可以输入名称，选择框架及语言

创建完成

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

2. 基础配置

以下为常用的依赖及基础配置

依赖

"dependencies": {
    "axios": "^1.6.0",
    "element-plus": "^2.4.2",
    "path": "^0.12.7",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "vuex": "^4.1.0"
  },

使用 npm install 依赖名 下载即可

引入

main.js

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import store from './store';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import axios from 'axios';

// 创建 Vue 应用
const app = createApp(App);

// 使用 Vuex store
app.use(store);

// 使用 Vue Router
app.use(router);

// 使用 Element Plus UI 组件库
app.use(ElementPlus);

// 配置全局 Axios
app.config.globalProperties.axios = axios;

// 挂载 Vue 应用到 #app 元素
app.mount('#app');

配置

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {             
    // 服务器配置
    // host: '0.0.0.0',     // 服务器主机名，可以设为 '0.0.0.0' 以允许外部访问
    // port: 8080,          // 服务器端口
    open: false,           // 启动时是否自动打开浏览器
    proxy: {}              // 代理配置
  },
  resolve: {
    // 模块解析配置
    alias: [   
      {
        find: '@',             // 模块导入中的别名
        replacement: resolve(__dirname, 'src')  // 别名对应的路径
      }
    ]
  }
});

三、参考文献

vite中文文档