VUE3 不同client加载不同CSS文件在生产环境的问题

有一个网站,是为很多客户(client)开发的,但是每一个客户的UI不一样

所以我的做法就是在main.js里面先获取当前client的名字,然后判断加载哪一个css文件

之前vue2我也是这么做的,都没什么问题,vue3做法有点不同,但也是同样思路,开发环境就没问题,生产环境的话就有问题,会把多个client的css文件都一起加载了

import {createApp} from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';
import store from './store';
import './assets/css/global.css';//这里的css没有影响
import './assets/iconfont/iconfont.css';
import swiper from '@/plugins/swiper'
import axios from '@/api/http.js'

const app = createApp(App);

let client = localStorage.getItem("eventClient");
console.log("====client!!!!!!!!!!!! =====",client)
if(client!=""&&client!=null){
    if(client=="clientA"){
        console.log("====clientA=====",)
        require ('./assets/css/clientA.scss');
    }else{
        console.log("====normal=====",)
        require ('./assets/css/normal.scss');
    }
}else{
    getClient();
}

// 获取当前的用户
function getClient() {
    axios.request({
        method: 'GET',
        url: '/cms/config',
    }).then(res => {
        let client = res.data.Client;
        localStorage.setItem("eventClient",client);
        if(client=="clientA"){
            console.log("==== clientA=====",)
            require ('./assets/css/clientA.scss');
        }else{
            console.log("====else =====",)
            require ('./assets/css/normal.scss');
        }
    }).catch(err => {
        console.log(err);
    })
}


app.use(store).use(router).use(ElementPlus).use(swiper).mount('#app');


router.beforeEach((to, from, next) => {
    // console.log("====qurey =====",to)
    if (localStorage.webToken) {
        if (to.path == '/login') {
            localStorage.setItem('webToken', '');
            next();
        } else if (to.path === null) {
            next('*');
        } else {
            next();
        }
    } else {
        if (to.query.token) {
            if (process.env.NODE_ENV === 'production') {
                next();
            } else {
                localStorage.setItem("webToken", JSON.stringify(to.query.token));
                next('/mec');
            }
        } else {
            console.log("==== to.path=====", to.path)
            if (to.path == '/login' || to.path == '/registration') {
                next();
            } else {
                next('/login');
            }
        }
        // if (to.path == '/login') {
        //   next();
        // }else{
        //   next('/login');
        // }
    }

});



img

你好,我是有问必答小助手,非常抱歉,本次您提出的有问必答问题,技术专家团超时未为您做出解答


本次提问扣除的有问必答次数,已经为您补发到账户,我们后续会持续优化,扩大我们的服务范围,为您带来更好地服务。

自问自答,换成
require.ensure([], function (require) {
require('@/assets/css/inpixon.scss');
})
就OK了