基础配置入门专题

专题说明

本专题介绍 Vite 配置文件的基本结构，帮助开发者掌握常用的配置项设置。

学习目标

理解 vite.config.js 配置文件结构
掌握根目录与公共基础路径配置
学会别名路径配置简化导入

学习内容

vite.config.js 基础结构：导出配置对象
配置根目录与公共基础路径：root、base 选项
别名路径配置：resolve.alias 设置

学习建议

在实际项目中创建 vite.config.js，尝试配置别名路径简化代码导入。

📝 发现内容有误？点击此处直接编辑

📝 配套习题（9 题）

判断题

Vite 配置文件 vite.config.js 必须使用 defineConfig 函数包装配置对象。

对

错

单选题

以下哪个是 Vite 配置文件的正确格式？

export default defineConfig({ server: { port: 3000 } })

module.exports = { server: { port: 3000 } }

config = { server: { port: 3000 } }

return { server: { port: 3000 } }

填空题

Vite 配置文件的默认名称是 ______________

判断题

root 配置项用于指定 Vite 项目的根目录，默认为当前工作目录。

对

错

单选题

base 配置项的作用是什么？

设置项目根目录路径

设置公共基础路径，用于部署到子路径

设置静态资源存放目录

设置源代码存放目录

填空题

部署 Vite 项目到子路径 https://example.com/app/ 时，base 配置项应设置为 ______

判断题

配置 resolve.alias 后，修改别名路径需要重启开发服务器才能生效。

对

错

单选题

在 vite.config.js 中配置 @ 别名指向 src 目录，应该使用哪种格式？

alias: { '@': 'src' }

resolve: { alias: { '@': '/src' } }

resolve.alias: { '@': path.resolve(__dirname, 'src') }

resolve: { alias: { '@': path.resolve(__dirname, './src') } }

多选题

关于 Vite 的 resolve.alias 配置，以下哪些说法是正确的？

别名配置可以简化模块导入路径

alias 配置项必须使用绝对路径

可以配置多个别名指向不同目录

别名只能配置单个字符如 @