feat: init

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

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

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

config/plugin/visualizer.ts

@@ -0,0 +1,20 @@
+/**
+ * Generation packaging analysis
+ * 生成打包分析
+ *
+ * Vite 7 + rollup-plugin-visualizer 目前是 ESM-only，
+ * 为避免在打包 vite.config.prod.ts 时被 esbuild 以 require 方式加载失败，
+ * 这里取消默认引入，仅在需要时手动在本地临时打开分析。
+ */
+import { isReportMode } from '../utils'
+
+export default function configVisualizerPlugin() {
+  // 如需开启打包分析，可改为动态引入 rollup-plugin-visualizer：
+  // const { visualizer } = await import('rollup-plugin-visualizer')
+  // 并返回相应插件实例。
+  if (isReportMode()) {
+    // 先返回空数组以保证构建稳定
+    return []
+  }
+  return []
+}

config/utils/index.ts

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

config/vite.config.base.ts

@@ -0,0 +1,45 @@
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import svgLoader from 'vite-svg-loader'
+import configArcoStyleImportPlugin from './plugin/arcoStyleImport'
+
+export default defineConfig({
+  base: './',
+  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,
+      },
+    },
+  },
+})

config/vite.config.dev.ts

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

config/vite.config.prod.ts

@@ -0,0 +1,28 @@
+import { mergeConfig } from 'vite'
+import configArcoResolverPlugin from './plugin/arcoResolver'
+import configCompressPlugin from './plugin/compress'
+import configVisualizerPlugin from './plugin/visualizer'
+import baseConfig from './vite.config.base'
+
+export default mergeConfig(
+  {
+    mode: 'production',
+    plugins: [configCompressPlugin('gzip'), configVisualizerPlugin(), configArcoResolverPlugin()],
+    build: {
+      chunkSizeWarningLimit: 20480,
+      reportCompressedSize: false,
+      rollupOptions: {
+        onwarn: () => {},
+        output: {
+          chunkFileNames: 'static/js/[name]-[hash].js',
+          entryFileNames: 'static/js/[name]-[hash].js',
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+        },
+      },
+      minify: 'esbuild',
+      target: 'es2015',
+      sourcemap: false,
+    },
+  },
+  baseConfig
+)