Antd is not defined 解决办法

vue组件完整导入配置的时候一直出现 Antd is not defined的提示

作者在配置完整导入之前,配置了按需导入,故而安装了 babel-plugin-import 插件,修改.babelrc文件,配置 babel-plugin-import

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

后期再进行vue组件完整导入配置的时候一直出现 Antd is not defined的提示,找了许多原因,没有找到问题所在,以下为完整配置代码:

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: ''
})

后续尝试将之前按需导入组件的.babelrc还原,发现奇迹发生了,界面完美显示效果。

 {
   "presets": [
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }],
      "stage-2"
    ],
 "plugins": ["transform-vue-jsx", "transform-runtime"]
}

你可能感兴趣的:(闲记)