vue-ts-example/vite.config.ts

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 ReactivityTransform from '@vue-macros/reactivity-transform/vite';
import path from 'node:path';
import { fileURLToPath, URL } from 'node:url';
import { pinyin } from 'pinyin-pro';
import type { OutputOptions } from 'rollup';
import UnoCSS from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/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 { defineConfig, loadEnv, PluginOption } from 'vite';
import cdnImport from 'vite-plugin-cdn-import';
import vueDevTools from 'vite-plugin-vue-devtools';

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const isBuild = command === 'build';
  const env = loadEnv(mode, process.cwd());

  return {
    base: env.VITE_BASE,
    plugins: Plugins(),
    define: {
      $__DEV__: JSON.stringify(!isBuild),
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    build: {
      sourcemap: mode !== 'production' || env.VITE_SOURCE_MAP === 'true',
      rollupOptions: {
        output: env.VITE_SPLIT_CHUNKS === 'true' ? createSplitChunkOutput() : undefined,
      },
    },
  };
});

// packages/vite/src/node/plugins/splitVendorChunk.ts
function createSplitChunkOutput(): OutputOptions {
  return {
    chunkFileNames: 'assets/chunk/[name]_[hash].js',
    entryFileNames: 'assets/entry/[name]_[hash].js',
    assetFileNames: 'assets/[ext]/[name]_[hash].[ext]',
    manualChunks: (id /* , { getModuleIds, getModuleInfo } */) => {
      if (isInNodeModules(id) /* && !isCSSRequest(id) */) {
        let pkgName = id;
        pkgName = pkgName.split('.pnpm/')?.[1] || pkgName;
        pkgName = pkgName.split('node_modules/')?.[1] || pkgName;
        pkgName = pkgName.startsWith('@') ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1] : pkgName.split('/')[0];

        if (pkgName.startsWith('@vue/') /* || pkgName === 'vue-demi' */) pkgName = 'vue';
        /* if (pkgName.includes('vue-router')) pkgName = 'vue-router'; */

        return `libs/${pkgName}`;
      } else if (id.includes('src/components')) {
        return formatFilename(id, 'components');
      } else if (id.includes('src/pages')) {
        return formatFilename(id, 'pages');
      }
    },
  };

  function formatFilename(id: string, prefix: string) {
    let filename = path
      .basename(id)
      .split('?')[0]
      .replace(/\.\w+$/, '');
    filename = pinyin(filename, { type: 'array' }).join('');
    return `${prefix}/${filename}`;
  }

  function isInNodeModules(id: string): boolean {
    return id.includes('node_modules');
  }
  /* const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
  const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request); */
}

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 }),
    ReactivityTransform(), // https://vue-macros.dev/zh-CN/features/reactivity-transform.html
  );

  plugins.push(
    AutoImport({
      resolvers: [
        TDesignResolver({
          library: 'mobile-vue',
          esm: true,
        }),
        VantResolver({
          importStyle: true,
        }),
      ],
      imports: ['pinia', 'vue', VueRouterAutoImports, unheadVueComposablesImports],
    }),
    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: [
        TDesignResolver({
          library: 'mobile-vue',
          esm: true,
        }),
        VantResolver({
          importStyle: true,
        }),
      ],
    }),
  );

  plugins.push([vueDevTools()]);

  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;
}