vue-ts-example/vite.config.plugins.ts

/**
 * https://github.com/antfu-collective/vitesse/blob/47618e72dfba76c77b9b85b94784d739e35c492b/vite.config.ts
 * https://github.com/vue-macros/vue-macros/blob/main/playground/vue3/vite.config.ts
 */

import VueI18n from '@intlify/unplugin-vue-i18n/vite';
import { PrimeVueResolver } from '@primevue/auto-import-resolver';
import { unheadVueComposablesImports } from '@unhead/vue';
import { VantResolver } from '@vant/auto-import-resolver';
import Vue from '@vitejs/plugin-vue';
import VueJsx from '@vitejs/plugin-vue-jsx';
import path from 'node:path';
import UnoCSS from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';
import { AntDesignVueResolver, NaiveUiResolver, TDesignResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
import VueMacros from 'unplugin-vue-macros/vite';
import Markdown from 'unplugin-vue-markdown/vite';
import { getPascalCaseRouteName, VueRouterAutoImports } from 'unplugin-vue-router';
import VueRouter from 'unplugin-vue-router/vite';
import { createUtils4uAutoImports } from 'utils4u/auto-imports';
import { type PluginOption } from 'vite';
import { checker } from 'vite-plugin-checker';
import { vitePluginFakeServer } from 'vite-plugin-fake-server';
import VitePluginImageTools from 'vite-plugin-image-tools';
import pluginPurgeCss from 'vite-plugin-purgecss-updated-v5';
import { viteSingleFile } from 'vite-plugin-singlefile';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import VueDevTools from 'vite-plugin-vue-devtools';
import MetaLayouts from 'vite-plugin-vue-meta-layouts';
import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';

import { viteArchiverPlugin } from './vite.config.plugin.archiver';

const cesiumSource = 'node_modules/cesium/Build/Cesium';
// This is the base url for static files that CesiumJS needs to load.
// Set to an empty string to place the files at the site's root path
export const cesiumBaseUrl = 'cesiumStatic';

export function Plugins() {
  const plugins: PluginOption[] = [];

  plugins.push(
    // https://vue-macros.dev/zh-CN/guide/bundler-integration.html
    VueMacros({
      plugins: {
        vue: Vue({ include: [/\.vue$/, /\.md$/] }),
        vueJsx: VueJsx(),
        // https://uvr.esm.is/guide/configuration.html
        // https://github.com/posva/unplugin-vue-router
        vueRouter: VueRouter({
          exclude: ['**/__*', '**/__*/**/*'],
          extensions: ['.page.vue', '.page.md'],
          getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
          logs: false,
          routesFolder: 'src/pages',
        }),
      },
    }),

    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts?tab=readme-ov-file#configuration
    // Layouts({ defaultLayout: 'sakai-vue/AppLayout', pagesDirs: [] }),

    // https://github.com/dishait/vite-plugin-vue-meta-layouts
    MetaLayouts({
      // defaultLayout: 'sakai-vue/AppLayout',
      defaultLayout: 'naive-ui/AppLayout',
      skipTopLevelRouteLayout: false, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
    }),

    // https://github.com/antfu/unocss
    // see uno.config.ts for config
    UnoCSS(),

    // https://github.com/unplugin/unplugin-vue-markdown
    Markdown({
      headEnabled: true,
    }),

    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      dirs: [
        // 'src/composables',
        'src/stores',
        'src/utils',
      ],
      imports: [
        'vue',
        'vue-i18n',
        'pinia',
        '@vueuse/core',
        VueRouterAutoImports,
        unheadVueComposablesImports,
        // 参考这个重写 utils4u 的 createUtils4uAutoImports 的逻辑 https://github.com/unplugin/unplugin-auto-import/blob/main/src/presets/vueuse-core.ts
        createUtils4uAutoImports(['primevue']),
        {
          'consola/browser': ['consola'],
          'vue-router/auto': ['useLink'],
          'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
        },
      ],
      resolvers: [TDesignResolver({ esm: true, library: 'mobile-vue' }), VantResolver({ importStyle: true })],
      vueTemplate: true,
    }),

    // https://github.com/antfu/unplugin-vue-components
    Components({
      // __开头的
      excludeNames: [/^__/],
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
          resolveIcons: true,
        }),
        IconsResolver({
          customCollections: ['svg'],
          prefix: 'icon',
        }), // https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing
        TDesignResolver({ esm: true, library: 'mobile-vue' }),
        VantResolver({ importStyle: true }),
        PrimeVueResolver(/* { components: { prefix: 'P' } } */),
        NaiveUiResolver(),
      ],
    }),

    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
    VueI18n({
      /* options */
      // locale messages resource pre-compile option
      include: [path.resolve(import.meta.dirname, './src/locales/**')],

      // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
      // transformI18nBlock(src) {
      //   console.debug(`src :>> `, src);
      //   console.debug(`typeof src :>> `, typeof src);
      //   return src as string;
      // },
    }),

    Icons({
      autoInstall: true,
      customCollections: {
        svg: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
          return svg.replace(/^<svg /, '<svg fill="currentColor" ');
        }),
      },
      iconCustomizer(collection, icon, properties) {
        properties.class = 'unplugin-icons';
      },
    }),

    // https://github.com/feat-agency/vite-plugin-webfont-dl?tab=readme-ov-file#-usage-simple-config-method-b-
    ViteWebfontDownload([
      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap',
      'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
    ]),

    // https://github.com/condorheroblog/vite-plugin-fake-server?tab=readme-ov-file#usage
    vitePluginFakeServer({
      basename: 'fake-api',
      enableProd: true,
      include: 'fake',
    }),

    // https://vite-plugin-checker.netlify.app/introduction/introduction.html
    checker({
      eslint: {
        lintCommand: 'eslint "./src/**/*.{js,jsx,ts,tsx,vue}"',
        useFlatConfig: true,
      },
      vueTsc: true,
      overlay: {
        initialIsOpen: false,
      },
      terminal: true,
      enableBuild: true,
      // XXX: pnpm add vls vti -D
    }),

    viteStaticCopy({
      targets: [
        // globalThis.CESIUM_BASE_URL = 'https://digitalarsenal.io/';
        { dest: cesiumBaseUrl, src: `${cesiumSource}/ThirdParty` },
        { dest: cesiumBaseUrl, src: `${cesiumSource}/Workers` },
        { dest: cesiumBaseUrl, src: `${cesiumSource}/Assets` },
        { dest: cesiumBaseUrl, src: `${cesiumSource}/Widgets` },
      ],
    }),

    VitePluginImageTools({
      quality: 80,
      enableWebp: true,
      enableDev: false,
      enableDevWebp: false,
      // 排除字体 SVG 文件和可能有问题的 SVG 文件
      excludes: /fonts\/.*\.svg$|Helvetica.*\.svg$/,
    }),
  );

  // 检查是否在VS Code终端中运行
  if (process.env.TERM_PROGRAM === 'vscode' || process.env.VSCODE_PID) {
    plugins.push(
      // 构建后自动将dist目录打包成zip文件
      viteArchiverPlugin({
        addTimestamp: false, // 是否添加时间戳到输出文件名
        format: 'zip', // 输出的压缩文件格式
        outputDir: '', // 输出目录，默认为项目根目录
        outputFileName: 'dist', // 输出的zip文件名（不含扩展名）
        sourceDir: 'dist', // 要打包的源目录
      }),
    );
  }

  const _unused = () => {
    plugins.push(
      // https://github.com/webfansplz/vite-plugin-vue-devtools
      VueDevTools({
        // launchEditor: env.LAUNCH_EDITOR,
      }),
      // https://github.com/unplugin/unplugin-vue-components/issues/664$0
      // https://github.com/VaJoy/vite-plugin-cdn-import-async$0
      // https://github.com/mmf-fe/vite-plugin-cdn-import/blob/HEAD/README.zh-CN.md
      // 会对 Components 插件的自动导入产生影响。
      // cdnImport({
      //   enableInDevMode: true,
      //   modules: ['vue'],
      //   prodUrl: '//fastly.jsdelivr.net/npm/{name}@{version}/{path}',
      // }),

      viteSingleFile(),

      // https://github.com/rsnakdmx/vite-plugin-purgecss-v5?tab=readme-ov-file#-usage
      pluginPurgeCss({
        variables: true,
      }),
    );
  };

  return plugins;
}