ant-design-vue组件按需引入及报错解决

ant-design-vue 组件按需引入

按需引入

如果使用babel的话，可以使用 babel-plugin-import 来进行按需加载。

安装babel-plugin-import：

npm install babel-plugin-import --save-dev

配置bable.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

按需引入ant-design-vue：

import Vue from 'vue'
import App from './App.vue'
import { Button, message } from 'ant-design-vue'

Vue.use(Button)

Vue.prototype.$message = message

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

按需引入报错

按需引入报错如下：

• error in ./node_modules/ant-design-vue/es/tag/style/index.less
• Inline JavaScript is not enabled. Is it set in your options?

报错原因：

官方文档

解决方法1:

• ant-design-vue样式设置，导入css文件
  • 修改babel.config.js，将其中的style: true修改为"style": “css”，修改后内容如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: "css"
      }
    ]
  ]
}

解决方法2：

• ant-design-vue样式设置，导入less文件：
  • 设置vue.config.js文件：

// vue.config.js
css: {
    loaderOptions: {
      less: {
        // 配置主题
        modifyVars: {
          'primary-color': '#116EBE', // UI框架的主要颜色
          'border-radius-base': '4px'
        },
        javascriptEnabled: true
      }
    }
  }
色
          'border-radius-base': '4px'
        },
        javascriptEnabled: true
      }
    }
  }