vite面试题及详细答案120题（01-30）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面试题-专栏总目录

一、本文面试题目录

1. 什么是Vite？它和其他前端构建工具的区别是什么？

Vite是一个由尤雨溪开发的前端构建工具，旨在提供更快的开发体验。与传统构建工具（如Webpack）不同，Vite基于原生ES模块（ES Modules），在开发环境中无需打包即可直接运行代码，大大提高了冷启动和热更新速度。

主要区别：

• 冷启动速度：Vite无需等待整个应用打包，启动时间接近瞬时；而Webpack需要先构建整个应用。
• 模块处理方式：Vite在开发时利用浏览器原生ES模块支持，按需加载；Webpack通过打包将所有模块合并为一个或多个bundle。
• 热更新（HMR）：Vite的HMR速度更快，且通常能保持组件状态；Webpack的HMR可能需要重新编译部分代码。

2. Vite的主要特性有哪些？

• 极速冷启动：基于浏览器原生ES模块，无需打包直接启动。
• 即时热更新（HMR）：模块热替换速度极快，且不丢失组件状态。
• 智能依赖预构建：使用esbuild预构建依赖，提高加载速度。
• 按需编译：仅在浏览器请求时编译模块，而非一次性处理所有代码。
• 内置对多种格式的支持：如TypeScript、JSX、CSS预处理器等。
• 优化的生产构建：使用Rollup生成优化后的静态资源。
• 插件系统：可扩展的插件接口，支持各种功能扩展。

3. Vite的劣势是什么？

• 生态系统成熟度：相比Webpack，Vite的插件生态可能不够完善，某些特定场景的解决方案可能较少。
• 复杂配置支持：对于非常复杂的项目结构或特殊需求，Vite的配置可能不如Webpack灵活。
• 生产环境构建：虽然Vite在开发环境表现出色，但生产环境仍依赖Rollup，对于某些极端复杂的打包需求，可能不如Webpack全面。
• 浏览器兼容性：由于依赖原生ES模块，Vite在旧版浏览器中的支持较差，需要额外配置。

4. Vite和Webpack的区别是什么？

特性	Vite	Webpack
构建方式	开发时基于ES模块，按需加载	先打包所有模块再运行
冷启动时间	接近瞬时	随项目大小增长
热更新速度	极快，通常保持组件状态	较慢，可能需要重新编译
依赖处理	使用esbuild预构建依赖	使用loader和plugin处理依赖
生产环境打包	使用Rollup	直接使用Webpack
配置复杂度	相对简单	复杂，需要大量配置
生态系统	快速发展，但不如Webpack成熟	非常成熟，几乎支持所有场景

5. Vite和Rollup的关系是怎样的？

Vite在生产环境使用Rollup作为打包工具，而在开发环境则使用基于ES模块的轻量级服务器。具体关系：

• 开发环境：Vite不使用Rollup，而是直接利用浏览器原生ES模块支持，通过中间件处理模块导入和转换。
• 生产环境：Vite使用Rollup进行打包，默认配置已优化，但可通过build.rollupOptions自定义。
• 插件兼容性：大多数Rollup插件可直接在Vite中使用，通过vite-plugin-rollup适配器。

6. Vite的开发服务器是如何工作的？

Vite开发服务器的工作流程：

1. 启动服务器：基于原生ES模块，无需打包。
2. 依赖预构建：使用esbuild预构建第三方依赖，将CommonJS/UMD转换为ES模块。
3. 模块请求处理：拦截浏览器的模块请求，动态转换代码（如TypeScript、JSX）。
4. 模块解析：处理裸模块导入（如import 'vue'），转换为正确的路径。
5. HMR支持：实现模块热更新，通过WebSocket与浏览器通信。
6. 静态资源处理：直接提供静态资源，支持按需编译。

7. Vite的生产环境构建是如何工作的？

Vite在生产环境使用Rollup进行构建：

1. 配置合并：合并Vite默认配置和用户自定义的build.rollupOptions。
2. 代码转换：使用各种插件处理代码（如TypeScript、JSX转换）。
3. 依赖处理：将依赖和应用代码分离，生成优化的chunk。
4. 代码分割：基于动态导入或路由进行代码分割，提高加载性能。
5. 资源处理：处理静态资源（图片、字体等），生成哈希文件名。
6. 压缩和优化：压缩JavaScript、CSS代码，生成sourcemap。
7. 输出文件：将优化后的资源输出到指定目录。

8. Vite如何利用浏览器原生ES模块？

Vite通过以下方式利用原生ES模块：

1. 直接提供ES模块：开发服务器直接返回符合ES模块规范的JavaScript文件。
2. 处理裸模块导入：将import 'vue'转换为import '/node_modules/vue/dist/vue.esm-bundler.js'。
3. 动态模块转换：在浏览器请求时，动态转换非JavaScript模块（如TypeScript、CSS）为ES模块。
4. 按需加载：仅在浏览器请求时加载模块，无需预打包整个应用。

示例：

// 源代码
import { createApp } from 'vue';
import App from './App.vue';// Vite处理后，浏览器实际请求的代码
import { createApp } from '/node_modules/vue/dist/vue.esm-bundler.js';
import App from '/src/App.vue?vue&type=script&lang=js';

9. Vite的依赖预构建是如何实现的？

Vite使用esbuild预构建依赖的流程：

1. 扫描导入：分析项目入口文件，提取所有依赖（裸模块导入）。
2. esbuild转换：使用esbuild将CommonJS/UMD模块转换为ES模块。
3. 缓存结果：将预构建的依赖缓存到node_modules/.vite目录。
4. 优化加载：预构建后的依赖作为单个模块提供，减少浏览器请求。

配置示例（vite.config.js）：

export default {optimizeDeps: {include: ['lodash-es', 'axios'], // 指定需要预构建的依赖exclude: ['some-lib'], // 排除某些依赖不进行预构建},
};

10. Vite中如何配置别名（alias）？

在vite.config.js中使用resolve.alias配置别名：

import { defineConfig } from 'vite';export default defineConfig({resolve: {alias: {'@': '/src', // 将@映射到src目录'components': '/src/components', // 自定义别名},},
});

使用示例：

// 原路径
import MyComponent from '../../components/MyComponent.vue';// 使用别名后
import MyComponent from '@/components/MyComponent.vue';

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】
6	Shader 编程 【图文示例 100+】

11. Vite中如何配置环境变量？

Vite通过.env文件和import.meta.env访问环境变量：

1. 创建环境文件：在项目根目录创建.env（通用）、.env.development（开发环境）、.env.production（生产环境）。
2. 定义变量：变量名必须以VITE_开头。

   VITE_API_URL=https://api.example.com
   VITE_APP_TITLE=My App
   

3. 访问变量：在代码中使用import.meta.env.VITE_API_URL。

12. Vite中.env文件的作用是什么？

.env文件用于存储环境变量，支持以下特性：

• 环境特定配置：通过.env.development、.env.production等文件为不同环境定义变量。
• 变量前缀：只有以VITE_开头的变量会被暴露给客户端代码。
• 优先级：环境特定文件 > 通用文件，命令行变量 > 文件变量。

示例：

# .env.development
VITE_API_URL=http://localhost:3000/api# .env.production
VITE_API_URL=https://api.production.com

13. Vite中如何使用不同的模式（mode）？

Vite通过mode参数区分不同环境：

1. 内置模式：development（开发）和production（生产）。
2. 自定义模式：可以定义其他模式（如test、staging）。
3. 指定模式：通过命令行参数或配置文件指定。

命令行示例：

# 使用development模式（默认）
npm run dev# 使用production模式
npm run build# 使用自定义模式
vite build --mode staging

配置文件示例（vite.config.js）：

export default defineConfig(({ mode }) => {if (mode === 'staging') {return {base: '/staging/',// 其他配置};}return {// 默认配置};
});

14. Vite中如何处理CSS？

Vite内置对CSS的支持，包括：

1. 直接导入：在JavaScript中导入CSS文件。

   import './style.css';
   

2. CSS Modules：通过.module.css文件名启用。

   import styles from './style.module.css';
   document.body.classList.add(styles.container);
   

3. PostCSS：自动应用项目中的PostCSS配置（如postcss.config.js）。
4. CSS预处理器：支持Sass、Less、Stylus等，需安装相应依赖。
5. CSS代码分割：根据入口点和动态导入自动分割CSS。

15. Vite中如何使用CSS预处理器（Sass, Less, Stylus）？

1. 安装依赖：

   # Sass
   npm install sass -D# Less
   npm install less -D# Stylus
   npm install stylus -D
   

2. 直接使用：导入相应扩展名的文件（.scss、.less、.styl）。

   import './style.scss';
   

3. 全局变量/混合：使用css.preprocessorOptions配置。

   export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`}}}
   });
   

16. Vite中如何使用CSS Modules？

1. 命名约定：使用.module.css、.module.scss等扩展名。

2. 导入和使用：

   // style.module.css
   .container {padding: 20px;
   }// App.js
   import styles from './style.module.css';function App() {return <div className={styles.container}>Hello World</div>;
   }
   

3. 自定义生成的类名：在vite.config.js中配置：

   export default defineConfig({css: {modules: {localsConvention: 'camelCaseOnly', // 类名转为驼峰generateScopedName: '[name]__[local]___[hash:base64:5]' // 自定义格式}}
   });
   

17. Vite中如何使用PostCSS？

1. 安装PostCSS：

   npm install postcss postcss-loader -D
   

2. 创建PostCSS配置文件（postcss.config.js）：

   module.exports = {plugins: {'postcss-preset-env': {}, // 自动添加浏览器前缀cssnano: {} // 压缩CSS}
   };
   

3. 配置Vite（可选，通常会自动读取PostCSS配置）：

   export default defineConfig({css: {postcss: {plugins: [// 直接在这里配置插件]}}
   });
   

18. Vite中如何处理静态资源？

Vite内置对多种静态资源的支持：

1. 直接导入：

   import imgUrl from './assets/image.png';
   document.getElementById('logo').src = imgUrl;
   

2. URL引用：在CSS或HTML中使用相对路径。

   .logo {background-image: url('./assets/logo.png');
   }
   

3. 资源处理：

   • 小于build.assetsInlineLimit（默认4kb）的资源会被内联为base64。
   • 其他资源会被复制到输出目录并生成哈希文件名。

4. 特殊导入：

   import svgUrl from './logo.svg?url'; // 强制作为URL
   import svgComponent from './logo.svg?component'; // 作为React/Vue组件导入
   

19. Vite中如何配置构建输出路径？

在vite.config.js中使用build.outDir配置：

export default defineConfig({build: {outDir: 'dist', // 默认输出目录assetsDir: 'assets', // 静态资源目录},
});

20. Vite中如何进行代码分割？

Vite支持多种代码分割方式：

1. 动态导入（推荐）：

   // 按需加载模块
   button.addEventListener('click', async () => {const { heavyModule } = await import('./heavyModule.js');heavyModule();
   });
   

2. 多入口应用：

   export default defineConfig({build: {rollupOptions: {input: {main: '/index.html',about: '/about.html',},},},
   });
   

3. 共享模块分割：Rollup会自动分割共享模块，也可通过manualChunks配置：

   export default defineConfig({build: {rollupOptions: {output: {manualChunks: {vendor: ['lodash', 'axios'], // 将这些依赖单独打包},},},},
   });
   

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】
6	Shader 编程 【图文示例 100+】

21. Vite中如何配置多入口？

在vite.config.js中配置Rollup的input选项：

import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'url';export default defineConfig({build: {rollupOptions: {input: {main: fileURLToPath(new URL('./index.html', import.meta.url)),admin: fileURLToPath(new URL('./admin.html', import.meta.url)),},},},
});

对应的HTML文件结构：

├── index.html
├── admin.html
└── src/├── main.js└── admin.js

22. Vite的构建优化有哪些方法？

1. 代码分割：使用动态导入或manualChunks配置。
2. 压缩代码：生产环境默认启用Terser压缩。
3. 移除console.log：通过Terser配置移除调试代码。
4. CDN加载外部资源：使用externals排除依赖，通过CDN加载。
5. 图片优化：使用image插件压缩图片。
6. 预加载/预取：通过插件自动添加<link rel="preload">。
7. 按需加载：动态导入非关键资源。
8. 使用esbuild：通过esbuild选项进一步优化构建。

配置示例：

export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true, // 移除consoledrop_debugger: true, // 移除debugger},},rollupOptions: {external: ['vue', 'react'], // 排除这些依赖output: {manualChunks: {vendor: ['lodash'], // 将lodash单独打包},},},},
});

23. Vite的插件机制是如何工作的？

Vite插件基于Rollup插件接口，同时扩展了一些特定钩子：

1. 插件类型：

   • 通用插件：同时影响开发和生产环境。
   • 开发时插件：仅在开发环境生效。
   • 构建时插件：仅在生产环境生效。

2. 核心钩子：

   • config：修改Vite配置。
   • transform：转换单个模块内容。
   • configureServer：配置开发服务器。
   • handleHotUpdate：自定义HMR逻辑。

3. 执行顺序：插件按注册顺序执行，可通过enforce选项调整优先级。

24. Vite中如何编写一个插件？

一个简单的Vite插件结构：

// my-plugin.js
export default function myPlugin() {return {name: 'my-vite-plugin', // 插件名称enforce: 'pre', // 执行优先级：'pre' | 'post'// 修改Vite配置config(config, { command }) {if (command === 'serve') {return {// 开发环境配置};}},// 转换模块内容transform(code, id) {if (id.endsWith('.js')) {// 修改JavaScript代码return code.replace('console.log', '// console.log');}return code;},// 配置开发服务器configureServer(server) {server.middlewares.use((req, res, next) => {// 自定义中间件逻辑next();});},// 自定义HMR处理handleHotUpdate(ctx) {console.log('HMR update:', ctx.file);return [];},};
}

在vite.config.js中使用：

import myPlugin from './my-plugin';export default defineConfig({plugins: [myPlugin()],
});

25. Vite中常用的插件有哪些？

1. 官方插件：

   • @vitejs/plugin-vue：Vue 3支持。
   • @vitejs/plugin-react：React支持。
   • @vitejs/plugin-legacy：旧版浏览器支持。

2. 社区插件：

   • vite-plugin-pwa：渐进式Web应用支持。
   • vite-plugin-svg-icons：SVG图标处理。
   • vite-plugin-compression：生产环境资源压缩。
   • vite-plugin-eslint：集成ESLint。
   • unplugin-auto-import：自动导入API。
   • unplugin-vue-components：自动导入组件。
   • @rollup/plugin-alias：别名支持。
   • @rollup/plugin-json：JSON处理。

26. Vite中如何使用TypeScript？

Vite内置对TypeScript的支持，无需额外配置：

1. 安装依赖：

   npm install typescript @types/node -D
   

2. 创建tsconfig.json：

   npx tsc --init
   

3. 编写TypeScript代码：

   // src/main.ts
   import { createApp } from 'vue';
   import App from './App.vue';createApp(App).mount('#app');
   

4. 配置选项（可选）：

   // vite.config.ts
   import { defineConfig } from 'vite';export default defineConfig({esbuild: {// 配置esbuild转换选项jsxFactory: 'h',jsxFragment: 'Fragment',},
   });
   

27. Vite中如何处理Vue单文件组件？

1. 安装Vue插件：

   npm install @vitejs/plugin-vue -D
   

2. 配置Vite：

   // vite.config.js
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],
   });
   

3. 编写Vue组件：

   <!-- src/App.vue -->
   <template><div class="hello"><h1>{{ msg }}</h1></div>
   </template><script lang="ts">
   import { defineComponent } from 'vue';export default defineComponent({setup() {return {msg: 'Hello Vue 3 + TypeScript + Vite',};},
   });
   </script>
   

28. Vite中如何处理React组件？

1. 安装React插件：

   npm install @vitejs/plugin-react -D
   

2. 配置Vite：

   // vite.config.js
   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],
   });
   

3. 编写React组件：

   // src/App.jsx
   import React from 'react';function App() {return (<div className="App"><h1>Hello React + Vite</h1></div>);
   }export default App;
   

29. Vite中如何使用JSX/TSX？

Vite内置对JSX/TSX的支持，无需额外配置：

1. React JSX：使用@vitejs/plugin-react插件。
2. Vue JSX：安装@vue/babel-plugin-jsx或使用@vitejs/plugin-vue-jsx。

示例（Vue JSX）：

// 安装依赖
npm install @vitejs/plugin-vue-jsx -D// vite.config.js
import { defineConfig } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';export default defineConfig({plugins: [vueJsx()],
});// 组件中使用
import { defineComponent } from 'vue';export default defineComponent({setup() {return () => <h1>Hello Vue JSX</h1>;},
});

30. Vite中如何进行单元测试？

Vite项目常用的单元测试方案：

1. Jest：

   • 安装：npm install jest @types/jest ts-jest -D
   • 配置：创建jest.config.js

   module.exports = {preset: 'ts-jest',testEnvironment: 'jsdom',
   };
   

   • 测试命令：npx jest

2. Vitest（Vite官方推荐）：

   • 安装：npm install vitest -D
   • 配置（vite.config.js）：

   import { defineConfig } from 'vite';export default defineConfig({test: {environment: 'jsdom',},
   });
   

   • 编写测试：

   // sum.test.js
   import { describe, it, expect } from 'vitest';describe('sum test', () => {it('adds 1 + 2 to equal 3', () => {expect(1 + 2).toBe(3);});
   });
   

   • 测试命令：npx vitest

二、120道面试题目录列表

文章序号	vite面试题120道
1	vite面试题及详细答案120道（01-30）
2	vite面试题及详细答案120道（31-60）
3	vite面试题及详细答案120道（61-90）
4	vite面试题及详细答案120道（91-120）