chore: 优化 vite 配置

yudao-ui-admin-vue3/build/vite/index.ts

@@ -0,0 +1,81 @@
+import { resolve } from 'path'
+import Vue from '@vitejs/plugin-vue'
+import VueJsx from '@vitejs/plugin-vue-jsx'
+import VueI18n from '@intlify/vite-plugin-vue-i18n'
+import WindiCSS from 'vite-plugin-windicss'
+import progress from 'vite-plugin-progress'
+import EslintPlugin from 'vite-plugin-eslint'
+import PurgeIcons from 'vite-plugin-purge-icons'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import viteCompression from 'vite-plugin-compression'
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import {
+  createStyleImportPlugin,
+  ElementPlusResolve,
+  VxeTableResolve
+} from 'vite-plugin-style-import'
+export function createVitePlugins(VITE_APP_TITLE: string) {
+  const root = process.cwd()
+  // 路径查找
+  function pathResolve(dir: string) {
+    return resolve(root, '.', dir)
+  }
+  return [
+    Vue(),
+    VueJsx(),
+    WindiCSS(),
+    progress(),
+    PurgeIcons(),
+    vueSetupExtend(),
+    createStyleImportPlugin({
+      resolves: [ElementPlusResolve(), VxeTableResolve()],
+      libs: [
+        {
+          libraryName: 'element-plus',
+          esModule: true,
+          resolveStyle: (name) => {
+            return `element-plus/es/components/${name.substring(3)}/style/css`
+          }
+        },
+        {
+          libraryName: 'vxe-table',
+          esModule: true,
+          resolveStyle: (name) => {
+            return `vxe-table/es/${name}/style.css`
+          }
+        }
+      ]
+    }),
+    EslintPlugin({
+      cache: false,
+      include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
+    }),
+    VueI18n({
+      runtimeOnly: true,
+      compositionOnly: true,
+      include: [resolve(__dirname, 'src/locales/**')]
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [pathResolve('src/assets/svgs')],
+      symbolId: 'icon-[dir]-[name]',
+      svgoOptions: true
+    }),
+    viteCompression({
+      verbose: true, // 是否在控制台输出压缩结果
+      disable: false, // 是否禁用
+      threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
+      algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
+      ext: '.gz', // 生成的压缩包后缀
+      deleteOriginFile: true //压缩后是否删除源文件
+    }),
+    createHtmlPlugin({
+      inject: {
+        data: {
+          title: VITE_APP_TITLE,
+          injectScript: `<script src="./inject.js"></script>`
+        }
+      }
+    })
+  ]
+}

yudao-ui-admin-vue3/build/vite/optimize.ts

@@ -0,0 +1,34 @@
+const include = [
+  'vue',
+  'sass',
+  'vue-router',
+  'vue-types',
+  'vue-i18n',
+  'vxe-table',
+  'vxe-table/es/style',
+  'xe-utils',
+  'lodash-es',
+  'element-plus',
+  'element-plus/es/locale/lang/zh-cn',
+  'element-plus/es/locale/lang/en',
+  '@iconify/iconify',
+  '@vueuse/core',
+  'qs',
+  'axios',
+  'pinia',
+  'dayjs',
+  'qrcode',
+  'echarts/core',
+  'echarts/charts',
+  'echarts/components',
+  'echarts/renderers',
+  'echarts-wordcloud',
+  'intro.js',
+  'crypto-js',
+  '@wangeditor/editor',
+  '@wangeditor/editor-for-vue'
+]
+
+const exclude = ['@iconify/json']
+
+export { include, exclude }

yudao-ui-admin-vue3/build/vite/styleImport.ts

@@ -0,0 +1,18 @@
+export const styleImportPlugin = {
+  libs: [
+    {
+      libraryName: 'element-plus',
+      esModule: true,
+      resolveStyle: (name) => {
+        return `element-plus/es/components/${name.substring(3)}/style/css`
+      }
+    },
+    {
+      libraryName: 'vxe-table',
+      esModule: true,
+      resolveStyle: (name) => {
+        return `vxe-table/es/${name}/style.css`
+      }
+    }
+  ]
+}

yudao-ui-admin-vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yudao-ui-admin-vue3",
-  "version": "1.6.5.1863",
+  "version": "1.6.5.1864",
   "description": "基于vue3、vite3、element-plus、typesScript",
   "author": "xingyu",
   "private": false,
@@ -21,8 +21,7 @@
     "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ",
-    "lint:pretty": "pretty-quick --staged",
-    "p": "plop"
+    "lint:pretty": "pretty-quick --staged"
   },
   "dependencies": {
     "@iconify/iconify": "^3.0.1",
@@ -78,7 +77,6 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.8.0",
     "lint-staged": "^13.0.4",
-    "plop": "^3.1.1",
     "postcss": "^8.4.19",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.6",

yudao-ui-admin-vue3/plop/component/component.hbs

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { useDesign } from '@/hooks/web/useDesign'
-
-const { getPrefixCls } = useDesign()
-
-const prefixCls = getPrefixCls('{{ name }}')
-</script>
-
-<template>
-  <div :class="`${prefixCls}-{{ name }}`">{{ upperFirstName }}</div>
-</template>

yudao-ui-admin-vue3/plop/component/index.hbs

@@ -1,3 +0,0 @@
-import {{ upperFirstName }} from './src/{{ upperFirstName }}.vue'
-
-export { {{ upperFirstName }} }

yudao-ui-admin-vue3/plop/component/prompt.js

@@ -1,38 +0,0 @@
-const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)
-
-module.exports = {
-  description: 'Create vue component',
-  prompts: [
-    {
-      type: 'input',
-      name: 'name',
-      message: '请输入组件名称（Please enter the component name）'
-    }
-  ],
-  actions: (data) => {
-    const { name } = data
-    const upperFirstName = toUpperCase(name)
-
-    const actions = []
-    if (name) {
-      actions.push({
-        type: 'add',
-        path: `./src/components/${upperFirstName}/src/${upperFirstName}.vue`,
-        templateFile: './plop/component/component.hbs',
-        data: {
-          name,
-          upperFirstName
-        }
-      }, {
-        type: 'add',
-        path: `./src/components/${upperFirstName}/index.ts`,
-        templateFile: './plop/component/index.hbs',
-        data: {
-          upperFirstName
-        }
-      })
-    }
-
-    return actions
-  }
-}

yudao-ui-admin-vue3/plop/view/prompt.js

@@ -1,37 +0,0 @@
-const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)
-
-module.exports = {
-  description: 'Create vue view',
-  prompts: [
-    {
-      type: 'input',
-      name: 'path',
-      message: '请输入路径（Please enter a path）',
-      default: 'views'
-    },
-    {
-      type: 'input',
-      name: 'name',
-      message: '请输入模块名称（Please enter module name）'
-    }
-  ],
-  actions: (data) => {
-    const { name, path } = data
-    const upperFirstName = toUpperCase(name)
-
-    const actions = []
-    if (name) {
-      actions.push({
-        type: 'add',
-        path: `./src/${path}/${upperFirstName}.vue`,
-        templateFile: './plop/view/view.hbs',
-        data: {
-          name,
-          upperFirstName
-        }
-      })
-    }
-
-    return actions
-  }
-}

yudao-ui-admin-vue3/plop/view/view.hbs

@@ -1,5 +0,0 @@
-<template>
-  <ContentWrap title="{{ upperFirstName }}"> {{ name }} </ContentWrap>
-</template>
-<script setup lang="ts" name="{{ name }}">
-</script>

yudao-ui-admin-vue3/vite.config.ts

@@ -1,19 +1,8 @@
 import { resolve } from 'path'
 import { loadEnv } from 'vite'
 import type { UserConfig, ConfigEnv } from 'vite'
-import Vue from '@vitejs/plugin-vue'
-import VueJsx from '@vitejs/plugin-vue-jsx'
-import VueI18n from '@intlify/vite-plugin-vue-i18n'
-import WindiCSS from 'vite-plugin-windicss'
-import progress from 'vite-plugin-progress'
-import EslintPlugin from 'vite-plugin-eslint'
-import PurgeIcons from 'vite-plugin-purge-icons'
-import { createHtmlPlugin } from 'vite-plugin-html'
-import viteCompression from 'vite-plugin-compression'
-import vueSetupExtend from 'vite-plugin-vue-setup-extend'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-import { createStyleImportPlugin, ElementPlusResolve, VxeTableResolve } from 'vite-plugin-style-import'
-
+import { createVitePlugins } from './build/vite'
+import { include, exclude } from "./build/vite/optimize"
 // 当前执行node命令时文件夹的地址(工作目录)
 const root = process.cwd()
 
@@ -52,60 +41,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         },
       },
     },
-    plugins: [
-      Vue(),
-      VueJsx(),
-      WindiCSS(),
-      progress(),
-      PurgeIcons(),
-      vueSetupExtend(),
-      createStyleImportPlugin({
-        resolves: [ElementPlusResolve(),VxeTableResolve()],
-        libs: [{
-          libraryName: 'element-plus',
-          esModule: true,
-          resolveStyle: (name) => {
-            return `element-plus/es/components/${name.substring(3)}/style/css`
-          }
-        },{
-          libraryName: 'vxe-table',
-          esModule: true,
-          resolveStyle: (name) => {
-            return `vxe-table/es/${name}/style.css`
-          }
-        }]
-      }),
-      EslintPlugin({
-        cache: false,
-        include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
-      }),
-      VueI18n({
-        runtimeOnly: true,
-        compositionOnly: true,
-        include: [resolve(__dirname, 'src/locales/**')]
-      }),
-      createSvgIconsPlugin({
-        iconDirs: [pathResolve('src/assets/svgs')],
-        symbolId: 'icon-[dir]-[name]',
-        svgoOptions: true
-      }),
-      viteCompression({
-        verbose: true, // 是否在控制台输出压缩结果
-        disable: false, // 是否禁用
-        threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
-        algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
-        ext: '.gz', // 生成的压缩包后缀
-        deleteOriginFile: true //压缩后是否删除源文件
-      }),
-      createHtmlPlugin({
-        inject: {
-          data: {
-            title: env.VITE_APP_TITLE,
-            injectScript: `<script src="./inject.js"></script>`
-          }
-        }
-      })
-    ],
+    // 项目使用的vite插件。 单独提取到build/vite/plugin中管理
+    plugins: createVitePlugins(env.VITE_APP_TITLE),
     css: {
       preprocessorOptions: {
         scss: {
@@ -139,37 +76,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         }
       }
     },
-    optimizeDeps: {
-      include: [
-        'vue',
-        'sass',
-        'vue-router',
-        'vue-types',
-        'vue-i18n',
-        'vxe-table',
-        'vxe-table/es/style',
-        'xe-utils',
-        'lodash-es',
-        'element-plus',
-        'element-plus/es/locale/lang/zh-cn',
-        'element-plus/es/locale/lang/en',
-        '@iconify/iconify',
-        '@vueuse/core',
-        'qs',
-        'axios',
-        'pinia',
-        'dayjs',
-        'qrcode',
-        'echarts/core',
-        'echarts/charts',
-        'echarts/components',
-        'echarts/renderers',
-        'echarts-wordcloud',
-        'intro.js',
-        'crypto-js',
-        '@wangeditor/editor',
-        '@wangeditor/editor-for-vue'
-      ]
-    }
+    optimizeDeps: { include, exclude }
   }
 }