ant-design-vue按需引入报Antd is not defined

vue项目引入社区的ant-design-vue,根据其文档进行按需加载,如下图所示:

main.js

clipboard.png

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import Vuex from 'vuex'
import App from './App'
import store from './store/index'
import router from './router'
import './utils/commonFunction/iconfont/iconfont.js'
import './utils/commonFunction/iconfont/iconfont.css'
import './assets/css/common.css'
import './assets/css/base.css'
import './assets/css/elementUiRe.css'

Vue.use(Antd)
Vue.use(Vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

.babelrc

clipboard.png

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    ["import", {
      "libraryName": "ant-design-vue",
      "libraryDirectory": "es",
      "style": "css" }
    ],
    "transform-runtime"
  ],
  "env": {
    "test": {
      "presets": ["env"],
      "plugins": [
        "transform-vue-jsx",
        "transform-es2015-modules-commonjs",
        "dynamic-import-node",
        "transform-runtime"
      ]
    }
  }
}

package.json

clipboard.png

这里是我安装配置的地方,但是一旦启动项目,就报错

clipboard.png

请问应该怎么修改处理?

阅读 22.8k
5 个回答
import Vue from 'vue'

import Antd from 'ant-design-vue/es'

Vue.use(Antd)

名称不一致就找不到
全局引入的时候去掉 按需加载 也可以解决问题

clipboard.png

clipboard.png

哥们你怎么解决的,我 是报warning,照样可以用,没问题,但是有警告

import { Transfer, Tree } from 'ant-design-vue'
components: { 'a-transfer': Transfer, 'a-tree': Tree }

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏