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

import VueI18nPlugin 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 { type ImportsMap } from 'unplugin-auto-import/types';
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 { 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 { PluginOption } from 'vite';
import cdnImport from 'vite-plugin-cdn-import';
import { vitePluginFakeServer } from 'vite-plugin-fake-server';
import vueDevTools from 'vite-plugin-vue-devtools';
import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';

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

  plugins.push(
    VueMacros({
      plugins: {
        vueRouter: VueRouter({
          routesFolder: 'src/pages',
          exclude: ['**/__*', '**/__*/**/*'],
          getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
          logs: false,
          extensions: ['.vue', '.page.vue', '.md'],
        }), // https://uvr.esm.is/guide/configuration.html
        vue: Vue({ include: [/\.vue$/, /\.md$/] }),
        vueJsx: VueJsx(), // 如有需要
      },
    }), // https://vue-macros.dev/zh-CN/guide/bundler-integration.html
    UnoCSS(),
    Markdown({ headEnabled: true }),
  );

  // TODO: import { Utils4uAutoImports } from 'utils4u';
  // https://github.com/unplugin/unplugin-auto-import?tab=readme-ov-file#configuration
  const Utils4uAutoImports: ImportsMap = {
    'utils4u/vue-use': [
      // alias
      ['useCountdown', 'useVueCountdown'],
    ],
  };

  plugins.push(
    AutoImport({
      resolvers: [TDesignResolver({ library: 'mobile-vue', esm: true }), VantResolver({ importStyle: true })],
      imports: [
        'vue',
        'pinia',
        '@vueuse/core',
        VueRouterAutoImports,
        unheadVueComposablesImports,
        Utils4uAutoImports,
        'vue-i18n',
      ],
    }),
    Components({
      // 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: [
        IconsResolver({
          prefix: 'icon',
          customCollections: ['svg'],
        }), // https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing
        TDesignResolver({ library: 'mobile-vue', esm: true }),
        VantResolver({ importStyle: true }),
        PrimeVueResolver(/* { components: { prefix: 'P' } } */),
      ],
    }),
    Icons({
      autoInstall: true,
      customCollections: {
        svg: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
          return svg.replace(/^<svg /, '<svg fill="currentColor" ');
        }),
      },
    }),
  );

  plugins.push(
    vueDevTools({
      // launchEditor: env.LAUNCH_EDITOR,
    }),
  );

  plugins.push(
    // 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',
    ]),
  );

  plugins.push(
    VueI18nPlugin({
      /* options */
      // locale messages resource pre-compile option
      include: [path.resolve(__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;
      // },
    }),
  );

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

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const unused = () => {
    plugins.push(
      // 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({
        modules: ['vue'],
        prodUrl: '//fastly.jsdelivr.net/npm/{name}@{version}/{path}',
        enableInDevMode: true,
      }),
    );
  };

  return plugins;
}