有一个网站,是为很多客户(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');
// }
}
});
你好,我是有问必答小助手,非常抱歉,本次您提出的有问必答问题,技术专家团超时未为您做出解答
本次提问扣除的有问必答次数,已经为您补发到账户,我们后续会持续优化,扩大我们的服务范围,为您带来更好地服务。
自问自答,换成
require.ensure([], function (require) {
require('@/assets/css/inpixon.scss');
})
就OK了