# viteConfig

**Repository Path**: htycode/vite-config

## Basic Information

- **Project Name**: viteConfig
- **Description**: 1111111111111111111111111111111111111
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-28
- **Last Updated**: 2026-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#  vueSetupExtend(), vite-plugin-vue-setup-extend

```
pnpm add vite-plugin-vue-setup-extend -D

vite-plugin-vue-setup-extend 是专门为 Vue 3 + Vite 项目设计的轻量插件，核心解决了 Vue 3 <script setup> 语法的一个痛点：无需额外写 <script> 标签就能直接给组件设置 name 属性。
在 Vue 3 的 <script setup> 语法中，默认无法直接定义组件名（组件名会被编译为随机值），而组件名在场景（如递归组件、Vue Devtools 调试、keep-alive 缓存、错误追踪）中是必需的。这个插件让你可以直接在 <script setup> 标签上通过 name 属性定义组件名，无需额外写非 setup 语法的 <script> 标签。
```

```
总结
vite-plugin-vue-setup-extend 核心是简化 Vue 3 <script setup> 语法中组件名的定义，无需额外写 <script> 标签；
主要应用场景：Devtools 调试、递归组件、keep-alive 缓存、错误追踪；
使用方式极简：安装 → 注册插件 → 在 <script setup> 标签上加 name 属性即可。
```

# 调试插件: CodeInspectorPlugin,code-inspector-plugin

```
pnpm add code-inspector-plugin -D

code-inspector-plugin 是一个跨构建工具（Vite/Webpack/Rollup） 的前端调试插件，核心能力是：在浏览器中点击页面任意元素，能自动跳转到本地代码编辑器对应的组件 / 样式文件位置。
简单来说，它解决了前端开发的一个高频痛点：
传统方式：想改某个页面元素的样式 / 逻辑，需要手动在代码里找对应的组件文件，耗时且容易找错；
插件方式：在浏览器中点击目标元素，编辑器会自动打开对应的代码行，直接定位到需要修改的位置，大幅提升调试效率。
这个插件支持 Vue、React、Svelte 等主流框架，也兼容 Vite、Webpack、Rollup 等构建工具。

```

```
// 注册并配置插件
CodeInspectorPlugin({
    // 可选：指定代码编辑器（自动检测失败时手动配置）
    editor: 'vscode', // 支持 vscode/webstorm/sublime/vim 等
    // 可选：触发方式（默认按住 Alt 键点击元素）
    hotKeys: ['alt'], // 支持 alt/ctrl/shift/meta（mac 下的 command）
}),
```

```
3. 生效与使用
重启 Vite 开发服务（npm run dev）；
打开浏览器的项目页面，按住 Alt 键（可自定义） 点击任意页面元素；
本地代码编辑器会自动打开该元素对应的组件文件，并定位到具体代码行（如 Vue 组件的 template/script/style 位置）。
```