vue cli3 如何配置babel.config.js 可以按需引用多个不同的组件库

如题我使用vue cli3.0 创建的vue项目,需要同时按需引用vant,we-vue库,已经安装好了依赖
图片描述

按官方说明配置了babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins:[
      ["import",{
              "libraryName": "vant",
              "libraryDirectory": "es",
              "style": true
            }
      ]
  ]
}

这样单独使用一个vant的时候没有问题,但我因项目需要又要引用we-vue这个ui,官方的配置也是要加入babel的配置,但是

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins:[
      ["import",[{
              "libraryName": "vant",
              "libraryDirectory": "es",
              "style": true
            },{
              "libraryName": "we-vue",
              "style": "style.css"
            }]
      ]
  ]
}

这样配置编译就报错了:
图片描述

babel配置貌似没错:
图片描述

问题出在哪里呢??

改成这样

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins:[
      [
          "import",
          {
              "libraryName": "vant",
              "libraryDirectory": "es",
              "style": true
        }
      ],
      [
          "import",
          {
              "libraryName": "we-vue",
              "style": "style.css"
        }
      ]
  ]
}

报以下错误:
图片描述

然后按它的意思改成这样:

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins:[
      [
          "import",
          {
              "libraryName": "vant",
              "libraryDirectory": "es",
              "style": true
            }
      ],
      [
          "import",
          {
              "libraryName": "we-vue",
              "style": "style.css"
            },
            "we-vue"
      ]
  ]
}

现在是编译成功,不报错了,但是引用的时候,组件样式没有载入成功

import Vue from 'vue'
    import { Dialog } from 'we-vue'
    Vue.use(Dialog)

Dialog({
                  title: '提示',
                  message: '项目不存在!!!',
                  skin: 'ios'
                });

如图样式没出来:
图片描述

回答:

经和we-vue作者咨询处理后,得知是还得自行引用css样式文件才可以,按需没有自动加载样式,we-vue下一版会优化。
详细看github issues
https://github.com/tianyong90…

回答:

const path = require('path')

 plugins:[
      ["import", {
              "libraryName": "vant",
              "libraryDirectory": "es",
              "style": true
            }],
      ["import", {
              "libraryName": "we-vue",
              "style": file => path.resolve(path, '../style.css')
            }, 'we-vue']
  ]

回答:

babel.config.js这个文件夹是干嘛的?专门配置第三方的插件组件UI库的吗?

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注