首次提交

cdtestplant/config/plugin/arcoResolver.ts

@@ -0,0 +1,19 @@
+/**
+ * If you use the template method for development, you can use the unplugin-vue-components plugin to enable on-demand loading support.
+ * 按需引入
+ * https://github.com/antfu/unplugin-vue-components
+ * https://arco.design/vue/docs/start
+ * Although the Pro project is full of imported components, this plugin will be used by default.
+ * 虽然Pro项目中是全量引入组件，但此插件会默认使用。
+ */
+import Components from 'unplugin-vue-components/vite'
+import { ArcoResolver } from 'unplugin-vue-components/resolvers'
+
+export default function configArcoResolverPlugin() {
+    const arcoResolverPlugin = Components({
+        dirs: [], // Avoid parsing src/components.  避免解析到src/components
+        deep: false,
+        resolvers: [ArcoResolver()],
+    })
+    return arcoResolverPlugin
+}

cdtestplant/config/plugin/arcoStyleImport.ts

@@ -0,0 +1,12 @@
+/**
+ * Theme import
+ * 样式按需引入
+ * https://github.com/arco-design/arco-plugins/blob/main/packages/plugin-vite-vue/README.md
+ * https://arco.design/vue/docs/start
+ */
+import { vitePluginForArco } from '@arco-plugins/vite-vue'
+
+export default function configArcoStyleImportPlugin() {
+    const arcoResolverPlugin = vitePluginForArco({})
+    return arcoResolverPlugin
+}

cdtestplant/config/plugin/compress.ts

@@ -0,0 +1,31 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * gzip压缩
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { Plugin } from 'vite'
+import compressPlugin from 'vite-plugin-compression'
+
+export default function configCompressPlugin(compress: 'gzip' | 'brotli', deleteOriginFile = false): Plugin | Plugin[] {
+    const plugins: Plugin[] = []
+
+    if (compress === 'gzip') {
+        plugins.push(
+            compressPlugin({
+                ext: '.gz',
+                deleteOriginFile,
+            })
+        )
+    }
+
+    if (compress === 'brotli') {
+        plugins.push(
+            compressPlugin({
+                ext: '.br',
+                algorithm: 'brotliCompress',
+                deleteOriginFile,
+            })
+        )
+    }
+    return plugins
+}

cdtestplant/config/plugin/imagemin.ts

@@ -0,0 +1,37 @@
+/**
+ * Image resource files used to compress the output of the production environment
+ * 图片压缩
+ * https://github.com/anncwb/vite-plugin-imagemin
+ */
+import viteImagemin from 'vite-plugin-imagemin'
+
+export default function configImageminPlugin() {
+    const imageminPlugin = viteImagemin({
+        gifsicle: {
+            optimizationLevel: 7,
+            interlaced: false,
+        },
+        optipng: {
+            optimizationLevel: 7,
+        },
+        mozjpeg: {
+            quality: 20,
+        },
+        pngquant: {
+            quality: [0.8, 0.9],
+            speed: 4,
+        },
+        svgo: {
+            plugins: [
+                {
+                    name: 'removeViewBox',
+                },
+                {
+                    name: 'removeEmptyAttrs',
+                    active: false,
+                },
+            ],
+        },
+    })
+    return imageminPlugin
+}

cdtestplant/config/plugin/visualizer.ts

@@ -0,0 +1,18 @@
+/**
+ * Generation packaging analysis
+ * 生成打包分析
+ */
+import visualizer from 'rollup-plugin-visualizer'
+import { isReportMode } from '../utils'
+
+export default function configVisualizerPlugin() {
+    if (isReportMode()) {
+        return visualizer({
+            filename: './node_modules/.cache/visualizer/stats.html',
+            open: true,
+            gzipSize: true,
+            brotliSize: true,
+        })
+    }
+    return []
+}

cdtestplant/config/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether to generate package preview
+ * 是否生成打包报告
+ */
+export default {}
+
+export function isReportMode(): boolean {
+    return process.env.REPORT === 'true'
+}

cdtestplant/config/vite.config.base.ts

@@ -0,0 +1,44 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import svgLoader from 'vite-svg-loader'
+import configArcoStyleImportPlugin from './plugin/arcoStyleImport'
+
+export default defineConfig({
+    plugins: [vue(), vueJsx(), svgLoader({ svgoConfig: {} }), configArcoStyleImportPlugin()],
+    resolve: {
+        alias: [
+            {
+                find: '@',
+                replacement: resolve(__dirname, '../src'),
+            },
+            {
+                find: 'assets',
+                replacement: resolve(__dirname, '../src/assets'),
+            },
+            {
+                find: 'vue-i18n',
+                replacement: 'vue-i18n/dist/vue-i18n.cjs.js', // Resolve the i18n warning issue
+            },
+            {
+                find: 'vue',
+                replacement: 'vue/dist/vue.esm-bundler.js', // compile template
+            },
+        ],
+        extensions: ['.ts', '.js'],
+    },
+    define: {
+        'process.env': {},
+    },
+    css: {
+        preprocessorOptions: {
+            less: {
+                modifyVars: {
+                    hack: `true; @import (reference) "${resolve('src/assets/style/breakpoint.less')}";`,
+                },
+                javascriptEnabled: true,
+            },
+        },
+    },
+})

cdtestplant/config/vite.config.dev.ts

@@ -0,0 +1,23 @@
+import { mergeConfig } from 'vite'
+import eslint from 'vite-plugin-eslint'
+import baseConfig from './vite.config.base'
+
+export default mergeConfig(
+    {
+        mode: 'development',
+        server: {
+            open: true,
+            fs: {
+                strict: true,
+            },
+        },
+        plugins: [
+            eslint({
+                cache: false,
+                include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
+                exclude: ['node_modules'],
+            }),
+        ],
+    },
+    baseConfig
+)

cdtestplant/config/vite.config.prod.ts

@@ -0,0 +1,31 @@
+import { mergeConfig } from 'vite'
+import baseConfig from './vite.config.base'
+import configCompressPlugin from './plugin/compress'
+import configVisualizerPlugin from './plugin/visualizer'
+import configArcoResolverPlugin from './plugin/arcoResolver'
+import configImageminPlugin from './plugin/imagemin'
+
+export default mergeConfig(
+    {
+        mode: 'production',
+        plugins: [
+            configCompressPlugin('gzip'),
+            configVisualizerPlugin(),
+            configArcoResolverPlugin(),
+            configImageminPlugin(),
+        ],
+        build: {
+            rollupOptions: {
+                output: {
+                    manualChunks: {
+                        arco: ['@arco-design/web-vue'],
+                        chart: ['echarts', 'vue-echarts'],
+                        vue: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'],
+                    },
+                },
+            },
+            chunkSizeWarningLimit: 2000,
+        },
+    },
+    baseConfig
+)