在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ vue cli3 如何配置babel.config.js 可以按需引用多個(gè)不同的

vue cli3 如何配置babel.config.js 可以按需引用多個(gè)不同的組件庫(kù)

如題我使用vue cli3.0 創(chuàng)建的vue項(xiàng)目,需要同時(shí)按需引用vant,we-vue庫(kù),已經(jīng)安裝好了依賴
圖片描述

按官方說(shuō)明配置了babel.config.js

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

這樣單獨(dú)使用一個(gè)vant的時(shí)候沒(méi)有問(wèn)題,但我因項(xiàng)目需要又要引用we-vue這個(gè)ui,官方的配置也是要加入babel的配置,但是

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

這樣配置編譯就報(bào)錯(cuò)了:
圖片描述

babel配置貌似沒(méi)錯(cuò):
圖片描述

問(wèn)題出在哪里呢??

改成這樣

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

報(bào)以下錯(cuò)誤:
圖片描述

然后按它的意思改成這樣:

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

現(xiàn)在是編譯成功,不報(bào)錯(cuò)了,但是引用的時(shí)候,組件樣式?jīng)]有載入成功

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

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

如圖樣式?jīng)]出來(lái):
圖片描述

回答
編輯回答
遲月

經(jīng)和we-vue作者咨詢處理后,得知是還得自行引用css樣式文件才可以,按需沒(méi)有自動(dòng)加載樣式,we-vue下一版會(huì)優(yōu)化。
詳細(xì)看github issues
https://github.com/tianyong90...

2018年8月23日 23:40
編輯回答
維他命
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']
  ]
2018年1月31日 04:39