@koala/ui/vite.config.ts

考拉前端组件库

import { resolve } from 'node:path'
import type { ConfigEnv } from 'vite'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { viteExternalsPlugin } from 'vite-plugin-externals'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
import { vitePluginForArco } from '@arco-plugins/vite-vue'
import { viteMockServe } from 'vite-plugin-mock'
import requireTransform from 'vite-plugin-require-transform'
import copy from 'rollup-plugin-copy'
import { getServiceEnvConfig } from './setting'
import { createProxy } from './config/proxy'

const USE_MOCK = process.env.USE_MOCK // 是否启用mock
const dest = './public'

export default defineConfig(({ mode }: ConfigEnv) => {
  const env = loadEnv(mode, process.cwd()) as unknown as ImportMetaEnv
  const envConfig = getServiceEnvConfig(env)
  return {
    base: '/ai-platform',
    plugins: [
      vue({
        // 默认开启响应性语法糖
        // reactivityTransform: true,
        reactivityTransform: resolve(__dirname, 'src'),
      }),
      vueJsx(),
      copy({
        targets: [
          { src: './node_modules/libpag/lib/libpag.wasm', dest },
          { src: './node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js', dest },
          { src: './node_modules/@easydarwin/easywasmplayer/libDecoder.wasm', dest },
        ],
        hook: process.env.NODE_ENV === 'production' ? 'writeBundle' : 'buildStart',
      }),
      requireTransform({
        fileRegex: /.ts$|.tsx$|.vue$/,
      }),
      AutoImport({
        imports: [
          'vue', 'vue-router',
        ],
        include: [
          /\.[jt]sx/,
          /\.vue$/,
          /\.vue\?vue/, // vue
          /\.md/,
        ],
        resolvers: [ArcoResolver()],
        // 调整自动引入的文件位置
        dts: 'src/types/auto-import.d.ts',
        // 解决自动引入eslint报错问题 需要在eslintrc的extend选项中引入
        eslintrc: {
          enabled: true,
          // 配置文件的位置
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true,
        },
      }),
      Components({
        resolvers: [
          ArcoResolver({
            resolveIcons: true,
            sideEffect: true,
          }),
        ],
        dts: 'src/types/components.d.ts',
      }),
      vitePluginForArco({
        style: 'css',
        // theme: '@arco-design/vue-webs',
      }),
      // 配置mock
      viteMockServe({
        mockPath: 'mock', //mock文件地址
        localEnabled: false, // 开发打包开关
        prodEnabled: false, // 生产打包开关
        // 这样可以控制关闭mock的时候不让mock打包到最终代码内
        // injectCode: `
        //   import { setupProdMockServer } from './mockProdServer';
        //   setupProdMockServer();
        // `,
        logger: false, //是否在控制台显示请求日志
        supportTs: false, //打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
        watchFiles: true,
      }),
      viteExternalsPlugin({
        echarts: 'echarts',
        // vue: 'Vue',
        // 'vue-router': 'VueRouter',
        // 'element-ui': 'element-ui',
      }),
    ],
    server: {
      https: false, // 是否开启 https
      port: 7000, // 端口号
      host: '0.0.0.0', // 监听所有地址
      cors: true, // 允许跨域
      // proxy: { // 自定义代理规则
      //   // 使用 proxy 实例
      //   '/api': {
      //     target: env.VITE_APP_API_BASE_URL,
      //     changeOrigin: true,
      //     rewrite: path => path.replace(/^\/api/, ''),
      //   },
      // },
      proxy: createProxy(true, envConfig),
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
        '/cpns': resolve(__dirname, 'src/components'),
      },
      extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名，可以自己 增减
    },
    build: {
      // 设置最终构建的浏览器兼容目标
      target: 'es2015',
      // 构建后是否生成 source map 文件
      sourcemap: true,
      //  chunk 大小警告的限制（以 kbs 为单位）
      chunkSizeWarningLimit: 2000,
      // 启用/禁用 gzip 压缩大小报告
      reportCompressedSize: false,
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${resolve('src/styles/variables.less')}"`,
          },
          math: 'strict',
          javascriptEnabled: true,
        },
      },
    },
  }
})