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 }); // console.log('我是pages++++++++', Pages); // console.log('我是pages.default++++++++', Pages.default); 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(), // TODO: 不知道为什么Pages在default里面,可能与package.json里的"type": "module"有关 Pages.default({ 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-form', 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', ], }), // viteExternalsPlugin({ // //vue: 'Vue', // //'lodash-es': '_', // //lodash: '_', // //dayjs: 'dayjs', // // 'ant-design-vue': 'antd', // '@antv/x6': 'X6', // '@wangeditor/editor': 'wangEditor', // echarts: 'echarts', // // 'bpmn-js':'', // // 'diagram-js':'' // }), ], 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'], }, }, }, }, resolve: { alias: [ { find: 'dayjs/locale', replacement: 'dayjs/esm/locale' }, { find: '~@', 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' }, ], }, 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: 3117, // 开启跨域 cors: true, proxy: { '/api': { //target: 'http://127.0.0.1:51001', //本地地址 //target: 'http://10.0.88.239:51001/', //9.2服务 target: 'http://10.0.88.239:51001/', //统一服务 ws: true, changeOrigin: true, rewrite: path => path.replace(/^\/api/, ''), }, }, }, }; return userConfig; };