Vue项目中条件加载组件导致CSS样式丢失问题的解决方案

// 问题代码示例
export const LAYOUT = () => (VITE_XXX_VERSION ? 
  import('@/xxx/xxx/xxx.vue') : 
  import('@/xxx/xxx/xxx.vue')
);

// 修改前（问题代码）
export const LAYOUT = () => (VITE_XXX_VERSION ? 
  import('@/xxx/xxx/xxx.vue') : 
  import('@/xxx/xxx/xxx.vue')
);

// 修改后（解决方案）
const NewLayout = () => import('@/xxx/xxx/xxx.vue');
const DefaultLayout = () => import('@/xxx/xxx/xxx.vue');

export const LAYOUT = () => {
  return VITE_XXX_VERSION ? NewLayout() : DefaultLayout();
};

<template>
  <!-- 组件模板 -->
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// 强制导入样式文件
import './xxx.less';

export default defineComponent({
  name: 'ConditionalComponent',
  // 组件配置
});
</script>

<style lang="less">
/* 组件样式 */
</style>

// xxx.less
@prefix-cls: ~'@{namespace}-xxx';

.@{prefix-cls} {
  // 样式定义
}

<script lang="ts">
import { defineComponent } from 'vue';
import './xxx.less'; // 显式导入样式

export default defineComponent({
  // 组件配置
});
</script>

// src/xxx/xxx.ts
import { getAppEnvConfig } from '@/utils/env';

const { VITE_XXX_VERSION } = getAppEnvConfig();

// 预加载两个组件
const NewLayout = () => import('@/xxx/xxx/xxx.vue');
const DefaultLayout = () => import('@/xxx/xxx/xxx.vue');

export const LAYOUT = () => {
  return VITE_XXX_VERSION ? NewLayout() : DefaultLayout();
};

<!-- src/xxx/xxx/xxx.vue -->
<template>
  <Layout :class="getClass" v-bind="lockEvents" class="xxxBg">
    <!-- 组件内容 -->
  </Layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// 确保样式被正确导入
import './xxx.less';

export default defineComponent({
  name: 'NewLayout',
  // 组件配置
});
</script>

<style lang="less">
/* 组件样式 */
</style>

# 构建项目
npm run build

# 检查 xxx 目录中的 CSS 文件
ls xxx/assets/

# 确认样式文件存在且包含正确的样式

// 使用清晰的环境变量名称
const { VITE_XXX_VERSION } = getAppEnvConfig();

// 推荐：预加载方式
const ComponentA = () => import('./xxx.vue');
const ComponentB = () => import('./xxx.vue');

export const ConditionalComponent = () => {
  return condition ? ComponentA() : ComponentB();
};

// 避免：内联条件导入
export const ConditionalComponent = () => 
  condition ? import('./xxx.vue') : import('./xxx.vue');

// 为条件组件创建独立的样式文件
import './xxx.less';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 确保样式文件不被错误分割
          vendor: ['vue', 'vue-router'],
        },
      },
    },
  },
});

npm run dev
# 检查组件样式是否正常显示

npm run build
npm run preview
# 检查生产环境中的样式是否正确

# 检查构建后的文件结构
tree xxx/assets/

# 确认 CSS 文件包含正确的样式
grep -r "xxxBg" xxx/assets/