在 vite 中配置 vue，核心做法是安装 @vitejs/plugin-vue 并在 vite.config.js 中引入该插件。这样 vite 就能识别并处理单文件组件（.vue）中的模板、脚本和样式。默认情况下，vite 已经内置了对 .vue 文件的解析支持，无需额外配置 webpack 那样的 loader。
Vite 如何识别和处理 .vue 文件
Vite 通过 Node.js 端的 @vitejs/plugin-vue 插件来处理 .vue 文件。该插件会在构建前拦截请求，将 .vue 文件拆分为 <template></template>、<script></script> 和 <style></style> 三个部分，并分别交给对应的处理器。模板部分会被编译为 JavaScript 渲染函数，脚本部分直接作为 ES Module 导出，样式部分则通过 CSS 预处理器或原生 CSS 模块处理。这种拆分使得 Vite 能够实现极速的热更新（HMR），因为每个部分都可以独立更新。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
上述代码展示了最基础的配置。只需导入 vue 插件并将其放入 plugins 数组即可。此时，项目中任何 .vue 文件都会被自动处理。如果项目中有 TypeScript 文件，Vite 也会自动处理 .ts 和 .tsx 文件，无需额外配置 Babel 或 TypeScript 编译器。
立即学习“Java免费学习笔记（深入）”；
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
Vue Router 和 Pinia 如何集成到 Vite 配置中
当项目需要路由状态管理时，需要在 Vite 配置中确保这些库能被正确解析。虽然 vue-router 和 pinia 本身不需要在 vite.config.js 中特殊配置，但它们的依赖项可能需要通过 resolve.alias 或 optimizeDeps.include 来优化。例如，如果使用别名指向特定路径，必须在 resolve.alias 中定义，否则 Vite 无法解析模块。此外，对于大型项目，可以将常用的第三方库加入 optimizeDeps.include 以加速首次启动。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
optimizeDeps: {
include: ['vue-router', 'pinia'],
},
});
这段代码展示了如何配置别名和优化依赖。别名 @ 指向 src 目录，方便在代码中使用相对路径。同时，将 vue-router 和 pinia 加入预构建列表，确保它们在开发服务器启动时被预先打包，避免首次访问时的延迟。这种配置方式保持了 Vite 的简洁性，同时提供了必要的灵活性。
当 .vue 文件中包含
当 .vue 文件使用 <style scoped></style> 时，Vite 会通过 @vitejs/plugin-vue 注入唯一的属性选择器，如 [data-v-xxxxx]，以确保样式仅作用于当前组件。这个过程发生在构建阶段，生成的 CSS 会包含这些唯一标识符。开发者无需手动管理样式隔离，Vite 会自动处理。如果多个组件使用了相同的类名，scoped 样式不会冲突，因为每个组件的样式都被限制在其作用域内。这种机制简化了样式管理，避免了全局污染。
