Vue3项目中路径别名和按需引入均在vite.config.ts统一配置并全程生效：别名由resolve.alias控制、需同步配置tsconfig.json的paths；按需引入依赖unplugin-vue-components等插件，自动分析注入，二者互不冲突可共存。
Vue3项目打包时，路径别名和按需引入不是“打包阶段才生效”的配置，而是贯穿开发与构建全程的基础能力。它们在 vite.config.ts 中统一配置，既提升编码体验，也影响最终产物结构——关键在于：别名由 vite.resolve.alias 控制，按需引入依赖插件（如 unplugin-vue-components + unplugin-auto-import），两者互不冲突，可共存。
路径别名：让 import 更干净
别名解决的是模块导入路径冗长、易出错的问题，比如把 import Button from '../../../components/Button.vue' 缩成 import Button from '@/components/Button.vue'。配置只需两步：
- 在
vite.config.ts的resolve.alias中定义映射，常用@指向src目录 - 同步在
tsconfig.json的compilerOptions.paths中声明相同映射，否则 TypeScript 类型检查和 VS Code 智能提示会报错
示例配置：
// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'@assets': resolve(__dirname, 'src/assets'),
'@utils': resolve(__dirname, 'src/utils')
}
}
})
对应 tsconfig.json：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@assets/*": ["src/assets/*"],
"@utils/*": ["src/utils/*"]
}
}
}
按需引入：减小包体积的核心手段
全局引入 Element Plus 或 Naive UI 会导致大量未使用组件和样式被打包进 chunk，按需引入只加载实际用到的组件，显著降低首屏体积。它不靠手动 import，而靠插件自动分析并注入。
- 安装必要插件：
unplugin-vue-components（自动注册组件）和unplugin-auto-import（自动引入 API 和组件方法） - 在 vite.config.ts 中启用插件，并传入对应 UI 库的解析器（如
ElementPlusResolver或NaiveUiResolver） - 删除
main.ts中原有的全局引入语句（如app.use(ElementPlus)），交由插件接管
以 Element Plus 为例：
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
})
打包时这些配置是否生效？
是的，全部生效。Vite 的构建流程（vite build）会完整读取 vite.config.ts，别名在解析阶段就被替换，按需引入的代码注入发生在编译期，最终输出的 dist 文件中只包含真正引用的组件和方法。注意两点：
- 别名配置不影响打包结果内容，只影响源码书写和编译过程中的路径解析
- 按需引入的效果直接反映在打包分析报告中（可通过
vite build --report生成 rollup-plugin-visualizer 图表验证）
常见踩坑提醒
配置后没生效？大概率是以下原因：
- 没装
@types/node（vite 内部用 path，TS 需要类型支持） - tsconfig.json 的
baseUrl和paths没配，导致 TS 报错但 Vite 仍能跑（开发无感，但 IDE 提示异常） - 插件顺序写错，
vue()必须在AutoImport和Components之前 - 用了非标准组件写法（比如动态组件
<component :is="xxx"></component>），插件无法静态分析，需手动 import
