前言

之前出了一篇自己搭建 后臺管理系統的文章，今天順便把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代理 },},},}

后續會放個代碼包，開箱即食的那種。還會做一些可服用的組件，關注不迷路。