tauri-meeting/vite.config.ts

import { type ConfigEnv, type UserConfig, defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import { author, copyright } from './package.json';
import Banner from 'vite-plugin-banner';
import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { resolve } from 'node:path';
import VueDevTools from 'vite-plugin-vue-devtools';
import { cssOption } from './vite/cssOption';
import { rolldownOptions } from './vite/rolldownOptions';
import { useViteCompression } from './vite/compression';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import { elementPlusStyleOptimizeIncludes, optimizeIncludes } from './vite/optimizeDeps';
import dayjs from 'dayjs';
import { getPrivateConfig } from './vite/private-config';
import { viteImageminOption } from './vite/viteImageminOption';
import { fileURLToPath } from 'node:url';

const host = process.env.TAURI_DEV_HOST;
// 得到个人配置
const privateConfig = getPrivateConfig();
// 添加环境变量
process.env.VITE_DEVICE_ID = privateConfig.deviceID;

export default defineConfig(async ({ command }: ConfigEnv): Promise<UserConfig> => {
  /** elementPlus导入的样式是css还是scss */
  const elementPlusStyleType: 'css' | 'scss' = 'scss';
  /** 是不是生产环境(预览环境也不是生产环境) */
  const isBuild = Boolean(command === 'build');
  /** 需要预构建的依赖 */
  const optimize: string[] = ['mitt', 'element-plus', 'element-plus/es', 'echarts', 'axios', 'simple-keyboard', '@element-plus/icons-vue'];

  const config: UserConfig = {
    base: './', // 基础路径

    plugins: [
      VueDevTools({}),

      Vue({}),
      // 自动导入API
      AutoImport({
        dirs: ['./vite/auto-import', './src/pinia/modules'], // 自动导入目录下的模块导出
        imports: ['vue', 'vue-router'],
        vueTemplate: true, // Vue模板内自动导入
        dts: './src/types/auto-imports.d.ts', // 当本项目安装 typescript 时是否 生成相应的 .d.ts 文件 [支持自定义路径] 当设置为true时，默认生成文件到'./auto-imports.d.ts'中
        resolvers: [
          // // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver({ importStyle: elementPlusStyleType === 'scss' ? 'sass' : 'css' }),
        ],
      }),
      // 自动注册组件
      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver({ importStyle: elementPlusStyleType === 'scss' ? 'sass' : 'css' }),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['solar', 'pepicons-pencil', 'ph', 'mdi', 'line-md', 'hugeicons', 'lucide', 'fluent', 'streamline-ultimate', 'ep'],
            customCollections: ['my'],
          }),
        ],
        dts: './src/types/components.d.ts',
      }),
      // 注册 svgIcon
      Icons({
        autoInstall: true,
        compiler: 'vue3',
        customCollections: { my: FileSystemIconLoader(resolve(__dirname, 'src/assets/svg-icons/unplugin-icons')) },
      }),
      // 压缩
      useViteCompression(isBuild),
    ],

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },

    css: cssOption(elementPlusStyleType), // css配置
    // 预构建
    optimizeDeps: {
      // 需要预构建的依赖
      include: isBuild ? [] : [...(await optimizeIncludes(optimize)), ...(await elementPlusStyleOptimizeIncludes(elementPlusStyleType))],
    },
    server: {
      open: false, // 是否自动打开浏览器
      port: 4266, // 开发服务器端口，与Tauri配置一致
      strictPort: true, // 设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口。
      cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源
      host: host || false,
      hmr: host ? { protocol: 'ws', host, port: 1421 } : undefined,
      watch: {
        // 告诉 Vite 忽略监视 `src-tauri` 目录
        ignored: ['**/src-tauri/**'],
      },
      // 开发时支持访问所有 HTML 入口
      fs: {
        allow: ['.'],
      },
    },
    define: {
      __APP_VERSION_TIMESTAMP__: JSON.stringify(new Date().getTime()), // 编译时间
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    },

    // 防止 vite 遮挡掉 rust 语言中的错误信息
    clearScreen: false,
    // 以 `envPrefix` 项开头的环境变量将通过 `import.meta.env` 在 Tauri 的源代码中公开。
    envPrefix: ['VITE_', 'TAURI_ENV_*'],
    build: {
      outDir: 'dist', // 设置Web部分输出目录
      cssCodeSplit: true, // 启用/禁用 CSS 代码拆分。当启用时,在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身,并在其被加载时插入。 如果禁用,整个项目中的所有 CSS 将被提取到一个 CSS 文件中。
      target: process.env.TAURI_ENV_PLATFORM === 'windows' ? 'chrome105' : 'safari14', // 设置最终构建的浏览器兼容目标。使用标准 ES 版本代替 Vite 特有的 'modules'
      chunkSizeWarningLimit: 1150, // 单位kb  打包后文件大小警告的限制 (文件大于此此值会出现警告)
      assetsInlineLimit: 4096, // 单位字节(1024等于1kb) 小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项。
      minify: !process.env.TAURI_ENV_DEBUG ? 'oxc' : false,
      reportCompressedSize: false, // 启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
      // 在 debug 构建中生成 sourcemap
      sourcemap: Boolean(process.env.TAURI_ENV_DEBUG),
      rolldownOptions: {
        ...rolldownOptions(),
        // 生产环境只构建主入口，开发环境构建所有入口以支持多窗口
        input: isBuild
          ? {
              main: resolve(__dirname, 'index.html'),
            }
          : {
              main: resolve(__dirname, 'index.html'),
              'floating-list-window': resolve(__dirname, 'floating-list-window.html'),
              'popup-window': resolve(__dirname, 'popup-window.html'),
            },
      },
    },
  };

  if (isBuild) {
    /** 添加版权信息 */
    const tannerText = `/**
 *  版权: ${copyright}
 *  作者: ${author}
 *  日期: ${dayjs().format('YYYY年MM月DD日')}
 */`;
    config.plugins?.push(Banner(tannerText));
    // 打包自动压缩图片
    config.plugins?.push(viteImageminOption());
  }

  return Promise.resolve(config);
});