假如你想在VUE的main.js里根据条件按需引入注册组件以及样式，那就这样子写，附赠自己写的vue一个框架配置多系统按需加载系统路由以及组件办法

假如你想在VUE的main.js里根据条件按需引入注册组件以及样式，那就这样子写

举例来说我想要引入大屏的一些组件，但是原来框架已经集成了多个项目，路由也是按需加载的，想要实现组件按需加载

先在main.js旁边新建一个文件web3d.js

import Vue from 'vue';
import dataV from '@jiaminghi/data-view';
Vue.use(dataV);

// 按需引入vue-awesome图标
import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js';
import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js';

// 全局注册图标
Vue.component('icon', Icon);

// 适配flex
import '@/common/flexible.js';

// 引入全局css
import './assets/scss/style.scss';

然后我们打开main.js

import Vue from 'vue';
import { request, post } from './views/co-assets/axios';
import './plugins/utils';
import './plugins/table';
import 'normalize.css/normalize.css'; // A modern alternative to CSS resets

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en'; // lang i18n

import '@/styles/index.scss'; // global css

import App from './App';
import store from './store';
import router from './router';
import 'echarts/lib/component/tooltip';
import '@/icons'; // icon
import '@/permission'; // permission control
// 设置如果是大屏系统则引入这些东西，如果不是大屏就不引入
const defaultSettings = require('./settings');
if (defaultSettings.flag === 'cccc') {
  require('./web3d.js')
}
// 设置如果是大屏系统则引入这些东西，如果不是大屏就不引入
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock');
  mockXHR();
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale });
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false;
Vue.prototype.$http = request;
Vue.prototype.$post = post;
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

下面讲的是多系统配置办法，可以不用往下看了哦~~~~

其中的./settings文件是用来配置当前加载哪个系统的,这个是我自己想的多系统使用同一个框架的办法，配合路由使用，大家如果有好的建议可以告诉我哦~~

// const aaaaa = {
//   title: 'aaaaa Monitor System',
//   titleZH: 'aaaa系統',
//   flag: 'aaaaa', // 這個不要改
//   logo: 'aaaaa Monitor'
// }
// const system = aaaaa //  當需要使用哪個系統就打開哪個

// const bbbb = {
//   title: 'Cable Consumable System',
//   titleZH: 'bbbb系統',
//   flag: 'bbbb', // 這個不要改
//   logo: 'bbbb Monitor'
// }
// const system = bbbb

const cccc = {
  title: 'cccc System',
  titleZH: 'cccc 系統',
  flag: 'cccc', // 這個不要改
  logo: 'cccc Monitor'
}
const system = webgl

// const dddd = {
//   title: 'HH Matrix System',
//   titleZH: 'dddd系統',
//   flag: 'dddd', // 這個不要改
//   logo: 'dddd'
// }
// const system = dddd

module.exports = {

  title: system.title,
  titleZH: system.titleZH,
  flag: system.flag,
  logo: system.logo,

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true
}

同时我们可以配置路由文件router/index.js

我把一些无关紧要的删掉了，更清晰看到代码实现过程

import Vue from 'vue';
import Router from 'vue-router';
const defaultSettings = require('../settings');
Vue.use(Router);

/* Layout */
import Layout from '@/layout';

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
const systemRoutes = {
  aaaa: [],
  bbbb: [],
  cccc: [],
  dddd: []
};
export const constantRoutes = systemRoutes[defaultSettings.flag];
const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  });

const router = createRouter();

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

export default router;