【vite好用的配置】自动导入组件、vue中的hook、路径解析、打包配置、本地运行反向代理配置

前言

之前出了一篇自己搭建 后台管理系统的文章，今天顺便把vite配置，涉及到的一些给大家分享吧。
按需食用哈。

一、 自动导入vue中的hook、ref等

1. 安装插件

npm install unplugin-auto-import --save-devyarn add unplugin-auto-import -D

2. 配置 Vite（vite.config.ts 或 vite.config.js）

这边用的vue，所以就是在 vite.config.ts 中配置咯

1）基础配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue'],// 生成自动导入的类型声明文件dts: 'src/auto-imports.d.ts',}),],
});

2）自定义导入（示例：Pinia、Vue Router）

AutoImport({imports: ['vue','vue-router',{pinia: ['defineStore', 'storeToRefs'],},],dts: 'src/auto-imports.d.ts',
});

3）与组件库集成（示例：NutUI、Element Plus）

AutoImport({imports: ['vue',{'@nutui/nutui': ['Button', 'Toast'], // NutUI'element-plus': ['ElMessage', 'ElNotification'], // Element Plus},],dts: 'src/auto-imports.d.ts',
});

4）自定义规则

AutoImport({resolvers: [// 自定义解析器，例如自动导入 NutUI 组件(name) => {if (name.startsWith('Nut')) {return {name: name.slice(3), // 移除前缀 Nutfrom: '@nutui/nutui',};}},],
});

5）配置关键字说明

• imports 指定要自动导入的模块或库，支持内置模块（如 vue）和自定义模块。
• dts 生成的类型声明文件路径（用于 TypeScript 或 IDE 智能提示）。
• dirs 自动导入指定目录下的模块（如 src/composables）。
• eslintrc 生成 ESLint 配置文件（解决 ESLint 报错）。
• vueTemplate 是否支持在 Vue 模板中自动导入（默认 false）。

6）在项目中使用

无需手动import，直接使用即可。

<template><div>{{ count }}</div><button @click="increment">+1</button>
</template><script setup>
// 无需手动导入 ref 和 computed
const count = ref(0);
const double = computed(() => count.value * 2);function increment() {count.value++;
}
</script>

【注意】
TypeScript 支持：确保 tsconfig.json 包含生成的类型声明文件：

• “include”: [“src/auto-imports.d.ts”]

二、 自动导入vue中的hook、ref等

1. 安装插件

npm install unplugin-vue-components --save-dev
# 或
yarn add unplugin-vue-components -D

2. 配置 Vite（vite.config.ts 或 vite.config.js）

同样滴，这边用的vue，所以就是在 vite.config.ts 中配置咯

1）基础配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';export default defineConfig({plugins: [vue(),Components({// 组件默认存放位置dirs: ['src/components'],// 生成自动导入的类型声明文件dts: 'src/components.d.ts',}),],
});

2）与 UI 组件库集成（示例：NutUI、Element Plus）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { NutuiResolver, ElementPlusResolver } from 'unplugin-vue-components/resolvers';export default defineConfig({plugins: [vue(),Components({// 配置解析器resolvers: [NutuiResolver(), // 自动导入 NutUI 组件ElementPlusResolver(), // 自动导入 Element Plus 组件],dts: 'src/components.d.ts',}),],
});

3）配置关键字说明

• dirs 自动扫描的组件目录（默认 ['src/components']）。
• extensions 组件文件扩展名（默认 ['vue']）。
• include 匹配文件的 glob 模式（默认 [**/*.vue]）。
• exclude 排除文件的 glob 模式。
• resolvers 配置组件库解析器（如 NutUI、Element Plus 等）。
• dts 生成的类型声明文件路径（用于 TypeScript 或 IDE 智能提示）。
• types 自定义组件类型（如 { from: 'vue-router', names: ['RouterLink'] }）。

4）在项目中的使用

<template><!-- 无需手动导入 Button 组件 --><NutButton type="primary">按钮</NutButton><ElButton type="success">Element Button</ElButton><!-- 本地组件也会自动导入 --><MyComponent />
</template>

5）自动导入组件、api混合使用

仅供参考哈，自己装自己需要的依赖和写自己需要的配置哦。

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 { NutuiResolver } from 'unplugin-vue-components/resolvers';export default defineConfig({plugins: [vue(),AutoImport({imports: ['vue', 'vue-router'],dts: 'src/auto-imports.d.ts',}),Components({resolvers: [NutuiResolver()],dts: 'src/components.d.ts',}),],
});

【注意】
TypeScript 支持：确保 tsconfig.json 包含生成的类型声明文件：

• “include”: [“src/components.d.ts”]

三、 配置@别名

1. 安装依赖

npm install @types/node --save-dev # 提供 path 模块类型支持yarn add @types/node --dev

2. 配置 Vite（vite.config.ts 或 vite.config.js）

再次同样滴，这边用的vue，所以就是在 vite.config.ts 中配置咯

1）基础配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path'; // 引入 path 模块export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, './src'), // 将 @ 指向 src 目录},},plugins: [vue()],
});

2）配置 TypeScript 支持（如果使用 TypeScript）

修改 tsconfig.json：

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"] // 让 TypeScript 识别 @ 别名}}
}

3. 配置 Vue CLI 项目配置

1）修改 vue.config.ts

const path = require('path');module.exports = {chainWebpack: (config) => {config.resolve.alias.set('@', path.resolve(__dirname, 'src'));},
};

2）配置 TypeScript 支持（如果使用 TypeScript）

修改 tsconfig.json：

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"]}}
}

四、 打包配置

这是我的配置哈，更多请站内查询一下～

build: {target: 'es2015',outDir: './dist', //指定输出路径assetsDir: 'assets', // 指定生成静态资源的存放路径minify: 'terser', // 混淆器，terser构建后文件体积更小terserOptions: {compress: {drop_console: true, // 生产环境去除consoledrop_debugger: true, // 生产环境去除debugger},},},

五、 代理配置

这是我的配置哈，更多请站内查询一下～

server: {hmr: true, // 开启热更新open: false, // 在服务器启动时自动在浏览器中打开应用程序// 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发proxy: {'/api': {// target 是你的后端 API 服务器的地址  target: '',// changeOrigin 设置为 true，表示在发送请求时会自动改变原始主机头为目标 URL  changeOrigin: true,ws: true,  // 允许websocket代理 },},},}

后续会放个代码包，开箱即食的那种。还会做一些可服用的组件，关注不迷路。