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

前言

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

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

1. 安装插件

npm install unplugin-auto-import --save-dev

yarn 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), // 移除前缀 Nut
          from: '@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, // 生产环境去除console
          drop_debugger: true, // 生产环境去除debugger
        },
      },
    },

五、 代理配置

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

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

      },
    },
  }

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