Vite 配置：使用 Vant 组件库、SVG 图标、路径别名

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite' import { VantResolver } from 'unplugin-vue-components/resolvers' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path'

// https://vitejs.dev/config/ export default defineConfig({ server: { // 服务器配置，指定端口号和是否开启主机名解析 port: 80, host: true }, plugins: [ vue(), // 自动导入组件插件，解析器支持 Vant、Element 和 and-vue 等 Components({ dts: false, // 原因：Toast、Confirm 等组件的样式需要单独引入，全局引入样式会造成冲突，因此关闭自动引入 resolvers: [VantResolver({ importStyle: false })] }), createSvgIconsPlugin({ // 指定图标文件夹，绝对路径（NODE 代码） iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 指定使用 SVG 图标的格式 symbolId: 'icon-[dir]-[name]' }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })