在Vue项目开发中，路由组件的name属性（编译后为__name）是一个很重要的标识，不管是用于Vue Devtools调试、组件缓存（keep-alive）还是错误追踪，都离不开它。但手动给每个组件写name不仅繁琐，还容易出现命名不统一、漏写的问题。
笔者主要是为了 keepAlive include 识别名字，才写的这个插件
- 读取
route.ts路由配置，自动为对应组件注入路由名称作为组件__name属性 - router.beforeEach 拿到的路由 name 直接匹配存储到 include 中，不用手动维护
一、插件核心思路
插件的核心逻辑可以概括为「三步走」：
- 解析路由文件：读取
src/router/index.ts，提取路由name和对应的组件路径； - 匹配组件文件：在构建过程中识别Vue组件文件，关联路由配置中的组件路径；
- 注入组件名称：修改组件编译后的代码，将路由
name写入组件的__name属性。
二、核心代码实现
1. 插件整体结构
基于unplugin框架开发，核心分为「路由解析」「别名处理」「代码注入」三大模块，完整代码如下（附详细注释）：
2. 关键模块解析
（1）路由解析模块（parseRouterConfig）
- 基于
acorn解析路由文件的AST，支持TS/JS语法； - 兼容多种路由写法：
- 直接箭头函数：
component: () => import('@/views/Home.vue')； - 变量引用：
const Home = () => import('@/views/Home.vue')+component: Home； - 普通函数：
component: function() { return import('@/views/Home.vue') }； - 字符串路径：
component: '@/views/Home.vue'。
- 直接箭头函数：
（2）别名处理模块（resolveAlias）
- 解决Vue项目中
@等路径别名的问题，将@/views/Home.vue转换为绝对路径/project/src/views/Home.vue； - 兼容Windows和Linux的路径分隔符（
\和/）。
（3）代码注入模块（injectRouteName）
- 使用
MagicString安全修改代码（保留sourcemap，不破坏调试）； - 只修改编译后的
__name属性，不影响原组件代码； - 容错处理：注入失败时仅打印日志，不阻断构建流程。
三、插件使用方法
1. 安装依赖
npm install unplugin acorn acorn-walk acorn-typescript @vue/compiler-sfc --save-dev
2. 在Vite中配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoRouteName from './plugins/auto-route-component-name'
export default defineConfig({
plugins: [
vue(),
autoRouteName.vite({
// 可选：自定义路由文件路径
routerFilePath: path.resolve(__dirname, 'src/router/index.ts'),
// 可选：自定义别名
alias: { '@': path.resolve(__dirname, 'src') }
})
]
})
3. 在Webpack中配置
// webpack.config.js
const autoRouteName = require('./plugins/auto-route-component-name')
module.exports = {
plugins: [
autoRouteName.webpack({
routerFilePath: path.resolve(__dirname, 'src/router/index.ts'),
alias: { '@': path.resolve(__dirname, 'src') }
})
]
}
四、插件优势与扩展方向
1. 核心优势
- 全自动：路由配置变更后，组件名称自动同步，无需手动修改；
- 高兼容：支持多种路由写法、TS/JS、Windows/Linux路径；
- 低侵入：基于AST解析和代码注入，不修改原组件源码；
- 高性能：缓存路由解析结果，避免重复计算。
2. 扩展方向
- 支持嵌套路由：解析
children中的路由配置； - 忽略指定组件：通过配置跳过不需要注入名称的组件。
五、总结
这个unplugin插件的核心价值在于「解放双手」——将重复、机械的组件命名工作自动化，同时保证命名与路由配置的一致性。
核心要点回顾：
- 用
acorn解析AST提取路由配置，是实现「自动识别」的基础； MagicString是安全修改代码的关键，保证sourcemap不丢失；- 路径别名解析和多路由写法兼容，是插件实用化的核心。
通过这个插件的开发，不仅能解决实际开发中的痛点，还能深入理解unplugin、AST解析、Vue编译流程等知识点，一举多得。
gitee 仓库 gitee.com/liucenter/u…
