Vue3 配置 vite.config.js

随手记录，以备不时之需

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createHtmlPlugin } from 'vite-plugin-html'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
	// 加载 .env 文件
	const env = loadEnv(mode, process.cwd());
	
	return {
		plugins: [
			vue(),
			AutoImport({
				imports: ['vue', 'vuex', 'vue-router'],
				resolvers: [
					ElementPlusResolver(),
					// 自动导入图标组件
					IconsResolver({
						prefix: 'Icon'
					})
				],
			}),
			Components({
				resolvers: [
					ElementPlusResolver({
						importStyle: "sass"
					}),
					// Auto register icon components
					// 自动注册图标组件
					IconsResolver({
						prefix: false,
						enabledCollections: [],
					})
				]
			}),
			Icons({
			  autoInstall: true,
			}),
            createHtmlPlugin({ 
				minify: true,
                inject: {
                    // 入口文件 index.html 的模板注入
                    data: {
                        title: env.VITE_APP_TITLE,
						keywords: env.VITE_APP_KEYWORDS,
						description: env.VITE_APP_DESCRIPTION
                    },
                },
            })
		],
		resolve: {
			alias: {// 当前目录
                '~': fileURLToPath(new URL('./', import.meta.url)),
				'@': fileURLToPath(new URL('./src', import.meta.url))
			}
		},
		css: {
		    preprocessorOptions: {
				scss: {
					additionalData: `@use "@/themes/${env.VITE_APP_THEME || 'default'}/index.scss" as *;`,
				},
		    },
		},
		// 开发服务器配置server
		server: {
			// 开发服务器端口配置。（注意：如果配置的端口已经被使用，Vite 会自动尝试下一个可用的端口，要看项目运行时最终生成的端口地址。）
			port: Number(env.VITE_APP_PORT || 9200),
			// proxy代理配置
			proxy: {
				[env.VITE_API_BASE]: {
					target: env.VITE_API_PROXY,
					changeOrigin: true,
					rewrite: (path) => path.replace(env.VITE_API_BASE, ''),
				}
			}
		},
		esbuild: {
			drop: ['console', 'debugger']
		},
		// build打包构建配置
		build: {
			// 打包输出的文件夹名称
			outDir: 'dist',
			// 静态资源文件保存的文件夹名称
			assetsDir: 'static',
			// 是否启用css代码拆分
			cssCodeSplit: true,
			// 是否开启 CSS 压缩
			cssMinify: true,
			// 打包构建后是否生成 source map 文件。
			sourcemap: true,
			// 打包构建时压缩混淆使用的混淆器
			minify: 'esbuild',
			// 自定义底层的 Rollup 打包配置（Rollup文档地址：https://cn.rollupjs.org/configuration-options/）
			rollupOptions: {
				// 输出配置
				output: {
					// 输出的文件自定义命名
					chunkFileNames: 'static/js/[name].[hash].js',
					entryFileNames: 'static/js/[name].[hash].js',
					assetFileNamesL: 'static/[ext]/[name].[hash].[text]'
				}
			}
		},
	}
})