微前端qiankun框架- Element样式隔离问题

项目简介

• 主工程：Vue2+Webpack
• 子工程：Vue3+Vite

子工程配置

1. 在App.vue中添加样式命名空间，Element-Puls提供的组件

<template>
  <el-config-provider namespace="ep" :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'
  import localeZH from 'element-plus/es/locale/lang/zh-cn'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: localeZH,
      }
    },
  })

</script>

2. 新建一个index.scss文件（位置无要求）

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

3. 配置vite.config.ts

import {ConfigEnv, defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'
import Components from 'unplugin-vue-components/vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import {resolve} from 'path';
import {createStyleImportPlugin, VxeTableResolve} from "vite-plugin-style-import";
import AutoImport from 'unplugin-auto-import/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";

const pathResolve = (dir: string) => {
    return resolve(__dirname, '.', dir);
};

const alias: Record<string, string> = {
    '/@': pathResolve('./src/'),
};


const viteConfig = defineConfig((mode: ConfigEnv) => {
    const env = loadEnv(mode.mode, process.cwd());
    console.log(mode.command)
    return {
        plugins: [
            vue(),
            vueSetupExtend(), // setup语法糖增强插件
            AutoImport({
                imports: ['vue', 'vue-router', 'pinia'], // 自动导入的依赖库数组
                dts: './auto-imports.d.ts', // 自动导入类型定义文件路径
            }),

            createStyleImportPlugin({
                resolves: [VxeTableResolve()], // 配置vxetable 按需加载
            }),
            qiankun('app-vue3', {
                useDevMode: true
            }),
            // 核心代码
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            // 核心代码
            Components({
                resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
            }),
        ],
        root: process.cwd(), // 项目根目录
        resolve: {alias}, // 路径别名配置
        base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
        server: {
            host: '0.0.0.0', // 服务器地址
            port: 7001,
            origin: 'http://localhost:7001',
            open: true, // 是否自动打开浏览器
            hmr: true, // 启用热更新
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        },
        build: {
            outDir: 'dist', // 打包输出目录
            chunkSizeWarningLimit: 1500, // 代码分包阈值
            rollupOptions: {
                output: {
                    entryFileNames: `assets/[name].[hash].js`,
                    chunkFileNames: `assets/[name].[hash].js`,
                    assetFileNames: `assets/[name].[hash].[ext]`,
                    compact: true,
                    manualChunks: {
                        vue: ['vue', 'vue-router', 'pinia'],
                    },
                },
            },
        },
        // 核心代码
        css: {
            preprocessorOptions: {
                css: {
                    charset: false
                },
                scss: {
                    // 这个地址就是上面新建的index.scss文件地址，我是放在主题包里面了
                    additionalData: `@use "/src/theme/element/index.scss" as *;`,
                },
            }
        },
    }
})

export default viteConfig;