VUE项目中多入口

前置条件

vue2.6 ，vue-cli4 ，webpack4 ，node12

问题：

在控制台和admin登陆分别用了不同的组件库，在控制台用的内部，在admin用的element，因为内部组件库是重新写了 element 的样式，导致打包之后的字体图标错乱

vue.config.js 中配置的是多入口文件 page

解决方式

在 vue.config.js 中增加了配置 css.extract 属性

  extract: false,
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            hack: `true;@import "url";`
          }
        }
      }
    }
  },

因为 extract在开发环境是 false, 在生产环境微 true, 所以在打包上线之后动态注入到了JS中，所以影响到了 iconfont 。

缺点：由于抽离了公共CSS的体积会大