micro-app/packages/icpx-message/vite.config.ts

import type { ConfigEnv, UserConfig } from 'vite';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import Pages from 'vite-plugin-pages';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { viteExternalsPlugin } from 'vite-plugin-externals';

// 引入模块联邦
import federation from '@originjs/vite-plugin-federation';

import path from 'path';

import { loadEnv } from './build';

export default ({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv({ command, mode });
  const userConfig: UserConfig = {
    base: env.VITE_APP_PUBLIC_PATH,
    define: {
      'process.env.VUE_APP_API_BASE_URL': JSON.stringify(env.VITE_APP_API_BASE_URL),
      'process.env.VUE_APP_PUBLIC_PATH': JSON.stringify(env.VITE_APP_PUBLIC_PATH),
      'process.env': env,
    },
    plugins: [
      vue(),
      // vueJsx(),
      // Pages({
      //   pagesDir: 'src/views',
      //   extensions: ['vue'],
      // }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(__dirname, './src/assets/ICP')],
        symbolId: 'icon-[dir]-[name]',
        customDomId: '__svg__icons__icp__dom__',
      }),
      federation({
        //远程模块名称，一个服务既可以作为本地模块使用远程模块组件，可以作为远程模块，对外提供组件
        name: '@remote/icpx-message',
        filename: 'remoteEntry.js', // 远程模块入口文件，与本地模块中`remotes`配置相对应
        exposes: {},
        remotes: {
          // 远程模块入口文件的网络地址，用于获取远程模块的`remoteEntry.js`来加载组件
          '@remote/icpx-platform': env.VITE_REMOTE_ICPX_PLATFORM + '/assets/remoteEntry.js',
        },
        /**
         * 远程模块组件使用的第三方依赖，如果本地有可以优先使用本地；
         * 在 dev 模式下尽量在本地引用这些第三方依赖，
         * 防止第三方组件在 dev 和打包模式下不同导致的问题。
         * */
        shared: [
          'vue-router',
          'vue',
          'vue-i18n',
          'vuex',
          'vuex-persistedstate',
          '@crami/ui',
          '@crami/locale',
          '@crami/http',
          '@crami/bui',
          // '@crami/bui-platform',
          // '@crami/bui-types',
          // '@crami/compiler',
          // '@crami/icons',
          // '@crami/ui-types',
        ],
      }),
    ],
    build: {
      cssCodeSplit: false,
      chunkSizeWarningLimit: 2048,
      rollupOptions: {
        output: {
          manualChunks: {
            // 将vue-router的合并打包去掉，要不useRoute会报错
            // vue: ['vue', 'vuex', 'vue-router'],
            vue: ['vue', 'vuex'],
            antdv: ['ant-design-vue', '@ant-design/icons-vue'],
            dayjs: ['dayjs'],
          },
        },
      },
      target: ['edge90', 'chrome90', 'firefox90', 'safari15'],
    },
    resolve: {
      alias: [
        // 模块联邦：将接口替换成远程模块
        // { find: '@/api/commonApi/index', replacement: 'icpx-platform/commonApi' },
        // {
        //   find: '../src/views/platform/components/Create.vue',
        //   replacement: 'icpx-platform/Create',
        // },
        // -----模块联邦替换结束
        { find: 'dayjs/locale', replacement: 'dayjs/esm/locale' },
        { find: '~@', replacement: path.join(__dirname, './src') },
        // { find: 'bb', replacement: path.join(__dirname, './src') },
        { find: '@', replacement: path.join(__dirname, './src') },
        { find: 'lodash', replacement: 'lodash-es' },
        // { find: /^lodash/, replacement: 'lodash' },
        { find: 'ant-design-vue/lib', replacement: 'ant-design-vue/es' },
        { find: '@crami/ui/lib', replacement: '@crami/ui/es' },
        { find: '@crami/bui/lib', replacement: '@crami/bui/es' },
        { find: '@crami/bui/lib', replacement: '@crami/bui/es' },
      ],
    },
    optimizeDeps: {
      include: [
        'ant-design-vue/es/locale/en_US',
        'ant-design-vue/es/locale/zh_CN',
        'store/plugins/expire',
        'ant-design-vue/es/_util/vue-types',
        'ant-design-vue/es/form',
        'dayjs',
        'dayjs/esm/locale/eu',
        'dayjs/esm/locale/zh-cn',
        '@ant-design/icons-vue',
        'lodash-es',
        '@crami/ui',
        '@crami/ui-types',
        '@crami/bui',
        '@crami/bui-types',
        '@crami/bui-platform',
      ],
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
    server: {
      host: true,
      port: 3113,
      // 开启跨域
      cors: true,
      proxy: {
        '/api': {
          target: 'http://10.0.88.239:51001/', //统一服务
          ws: true,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ''),
        },
      },
    },
  };
  return userConfig;
};