import path from 'node:path' import process from 'node:process' import type { ConfigEnv } from 'vite' import { defineConfig, loadEnv } from 'vite' import Vue from '@vitejs/plugin-vue' import EnvCaster from '@niku/vite-env-caster/dist/index' // banner import Banner from 'vite-plugin-banner' // auto import import AutoImport from 'unplugin-auto-import/vite' import { transformShortVmodel } from '@vue-macros/short-vmodel' import { unheadVueComposablesImports } from '@unhead/vue' // vue macros import VueMacros from 'unplugin-vue-macros/vite' // layout import Layouts from 'vite-plugin-vue-layouts' // vue-router import VueRouter from 'unplugin-vue-router/vite' import type { EditableTreeNode } from 'unplugin-vue-router' import { VueRouterAutoImports } from 'unplugin-vue-router' import WebFontDownload from 'vite-plugin-webfont-dl' import VueDevTools from 'vite-plugin-vue-devtools' // unocss import Unocss from 'unocss/vite' import VueI18n from '@intlify/unplugin-vue-i18n/vite' import Components from 'unplugin-vue-components/vite' // svg import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // compress import ViteCompression from 'vite-plugin-compression' // pwa import { VitePWA } from 'vite-plugin-pwa' // markdown import Markdown from 'unplugin-vue-markdown/vite' import LinkAttributes from 'markdown-it-link-attributes' import Shiki from '@shikijs/markdown-it' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // import { PrimeVueResolver } from './build/primevue' import pkg from './package.json' type Algorithm = 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw' let routeExtended = false export default defineConfig(({ command, mode }: ConfigEnv) => { console.log('command', command) const viteEnv = loadEnv(mode, process.cwd()) const plugins = [ EnvCaster({ moduleName: 'nenv', exportName: 'env', declaration: 'src/types/env.d.ts', }), Banner({ outDir: '', content: `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author.name}\n */` }), // https://github.com/posva/unplugin-vue-router VueRouter({ extensions: ['.vue', '.md'], // 忽略 pages 中的所有 components 下的组件路由 // exclude: ['**/components/*'], dts: 'src/typed-router.d.ts', extendRoute: (route: EditableTreeNode) => { if (routeExtended) { return } const findRoot = (route: EditableTreeNode): EditableTreeNode => { if (route.parent) { return findRoot(route.parent) } return route } const root = findRoot(route) const redirectRoute = root.insert('/redirect/:path(.*):_redirect_type(.*)', '~/layouts/page/redirect.vue') redirectRoute.name = 'Redirect' redirectRoute.path = '/redirect/:path(.*):_redirect_type(.*)' redirectRoute.meta = { title: 'Redirect', hideInMenu: true, hideInBreadcrumb: true, } routeExtended = true }, }), VueMacros({ plugins: { vue: Vue({ include: [/\.vue$/, /\.md$/], template: { compilerOptions: { nodeTransforms: [ transformShortVmodel({ prefix: '$' }), ], }, }, }), }, }), // https://github.com/JohnCampionJr/vite-plugin-vue-layouts Layouts(), // https://github.com/antfu/unplugin-auto-import AutoImport({ imports: [ 'vue', 'vue/macros', '@vueuse/core', VueRouterAutoImports, // { // // add any other imports you were relying on // 'vue-router/auto': ['useLink', 'createRouter', 'createWebHistory', 'Router'], // }, unheadVueComposablesImports, { 'naive-ui': [ 'useDialog', 'useMessage', 'useNotification', 'useLoadingBar', ], }, ], dts: 'src/auto-imports.d.ts', dirs: [ 'src/composables/**', 'src/stores', 'src/types', 'src/api/**', ], vueTemplate: true, resolvers: [ NaiveUiResolver(), // PrimeVueResolver(), ], }), // https://github.com/antfu/unplugin-vue-components Components({ // allow auto load markdown components under `./src/components/` extensions: ['vue', 'md', 'ts'], // allow auto import and register components used in markdown include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.ts$/], directoryAsNamespace: true, collapseSamePrefixes: true, dts: 'src/components.d.ts', resolvers: [ NaiveUiResolver(), // PrimeVueResolver({ // // importTheme: 'mira', // importStyle: false, // importIcons: true, // prefix: 'P' // }), // (name) => { // if (name.startsWith('L')) { // const importName = name.slice(2) // console.log("🚀 ~ defineConfig ~ importName:", importName) // const from = 'src/components' // return { // name, // from: `${from}/${importName}`, // } // } // }, ], }), // https://github.com/antfu/unocss // see uno.config.ts for config Unocss(), // https://github.com/feat-agency/vite-plugin-webfont-dl WebFontDownload(), // https://github.com/webfansplz/vite-plugin-vue-devtools VueDevTools(), // https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.md createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'assets/svg')], symbolId: 'nl-[dir]-[name]', }), // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n VueI18n({ runtimeOnly: true, compositionOnly: true, fullInstall: true, include: [path.resolve(__dirname, 'locales/**')], }), ] // if (viteEnv.VITE_VISUALIZER == 'true') { // plugins.push(visualizer({ // gzipSize: true, // brotliSize: true, // open: true, // })) // } // compress if (viteEnv.VITE_COMPRESS !== 'none') { plugins.push(ViteCompression({ algorithm: viteEnv.VITE_COMPRESS as Algorithm })) } // https://github.com/antfu/vite-plugin-pwa if (viteEnv.VITE_PWA === 'true') { plugins.push(VitePWA({ registerType: 'autoUpdate', includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'], manifest: { name: 'N-Admin', short_name: 'N-Admin', theme_color: '#ffffff', icons: [ { src: '/pwa-192x192.png', sizes: '192x192', type: 'image/png', }, { src: '/pwa-512x512.png', sizes: '512x512', type: 'image/png', }, { src: '/pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable', }, ], }, })) } // https://github.com/antfu/vite-plugin-vue-markdown // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite if (viteEnv.VITE_MARKDOWN === 'true') { plugins.push(Markdown({ wrapperClasses: 'prose prose-sm m-auto text-left', headEnabled: true, async markdownItSetup(md) { md.use(LinkAttributes, { matcher: (link: string) => /^https?:\/\//.test(link), attrs: { target: '_blank', rel: 'noopener', }, }) md.use(await Shiki({ defaultColor: false, themes: { light: 'vitesse-light', dark: 'vitesse-dark', }, })) }, })) } return { base: viteEnv.VITE_BASE_URL, plugins, resolve: { alias: { '~/': `${path.resolve(__dirname, 'src')}/`, '#/': `${path.resolve(__dirname, 'src/types')}/`, }, }, server: { proxy: { '^/api': { target: 'http://127.0.0.1:19999', changeOrigin: true, // rewrite: path => path.replace(/^\/api/, '') }, }, }, optimizeDeps: { include: [], }, // https://github.com/vitest-dev/vitest test: { include: ['test/**/*.test.ts'], environment: 'jsdom', deps: { inline: ['@vue', '@vueuse', 'vue-demi'], }, }, ssr: { // TODO: workaround until they support native ESM noExternal: ['workbox-window', /vue-i18n/], }, build: { reportCompressedSize: true, sourcemap: false, commonjsOptions: { ignoreTryCatch: false, }, }, } })