first commit

config/plugins/app-info.ts

@@ -0,0 +1,27 @@
+import boxen from 'boxen'
+import picocolors from 'picocolors'
+import type { Plugin } from 'vite'
+
+export default function appInfo(): Plugin {
+  return {
+    name: 'appInfo',
+    apply: 'serve',
+    async buildStart() {
+      const { bold, green, cyan, bgGreen, underline } = picocolors
+      // eslint-disable-next-line no-console
+      console.log(
+        boxen(
+          `${bold(green(`${bgGreen('ContiNew Admin v3.0.0-SNAPSHOT')}`))}\n${cyan('在线文档：')}${underline(
+            'https://doc.charles7c.top/'
+          )}\n${cyan('持续迭代优化的前后端分离中后台管理系统框架。')}`,
+          {
+            padding: 1,
+            margin: 1,
+            borderStyle: 'double',
+            textAlignment: 'center'
+          }
+        )
+      )
+    }
+  }
+}

config/plugins/auto-import.ts

@@ -0,0 +1,13 @@
+import autoImport from 'unplugin-auto-import/vite'
+
+export default function createAutoImport() {
+  return autoImport({
+    // 自动导入 vue 相关函数，如: ref、reactive、toRef等
+    imports: [
+      'vue',
+      'vue-router',
+      'pinia',
+    ],
+    dts: './src/types/auto-imports.d.ts'
+  })
+}

config/plugins/components.ts

@@ -0,0 +1,11 @@
+import components from 'unplugin-vue-components/vite'
+
+export default function createComponents() {
+  return components({
+    // 指定组件位置，默认是 src/components 自动导入自定义组件
+    dirs: ['src/components'],
+    extensions: ['vue', 'tsx'],
+    // 配置文件生成位置
+    dts: './src/types/components.d.ts',
+  })
+}

config/plugins/index.ts

@@ -0,0 +1,18 @@
+import type { PluginOption } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import appInfo from './app-info'
+
+import createAutoImport from './auto-import'
+import createComponents from './components'
+import createSvgIcon from './svg-icon'
+import createMock from './mock'
+
+export default function createVitePlugins(viteEnv, isBuild = false) {
+  const vitePlugins: (PluginOption | PluginOption[])[] = [appInfo(), vue(), vueJsx()]
+  vitePlugins.push(createAutoImport())
+  vitePlugins.push(createComponents())
+  vitePlugins.push(createSvgIcon(isBuild))
+  vitePlugins.push(createMock(viteEnv, isBuild))
+  return vitePlugins
+}

config/plugins/mock.ts

@@ -0,0 +1,17 @@
+import { viteMockServe } from 'vite-plugin-mock'
+
+export default function createMock(env, isBuild) {
+  const { VITE_BUILD_MOCK } = env
+  return viteMockServe({
+    mockPath: 'src/mock', // 目录位置
+    logger: !isBuild, //  是否在控制台显示请求日志
+    supportTs: true, // 是否读取 ts 文件模块
+    localEnabled: true, // 设置是否启用本地mock文件
+    prodEnabled: isBuild && VITE_BUILD_MOCK === 'true', // 设置打包是否启用mock功能
+    // 这样可以控制关闭mock的时候不让mock打包到最终代码内
+    injectCode: `
+          import { setupProdMockServer } from '../src/mock/index';
+          setupProdMockServer();
+        `
+  })
+}

config/plugins/svg-icon.ts

@@ -0,0 +1,13 @@
+import path from 'node:path'
+import process from 'node:process'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+
+export default function createSvgIcon(isBuild) {
+  return createSvgIconsPlugin({
+    // 指定需要缓存的图标文件夹
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    // 指定 symbolId 格式
+    symbolId: 'icon-[dir]-[name]',
+    svgoOptions: isBuild,
+  })
+}