vue脚手架antd按需加载遇到的坑

使用时我本地的vue脚手架为4.x

yarn add ant-design-vue
yarn add babel-plugin-import --dev

配置babel.config.js

module.exports = {
  presets: [ '@vue/cli-plugin-babel/preset' ],
  plugins: [ [ 'import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true } ] ]
};
完成后运行提示需要less-loader,安装less和less-loader
yarn add less less-loader --dev
安装后配置vue.config.js
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      //设置全局样式文件 
      //patterns: [ path.resolve(__dirname, './src/assets/css/base.less') ]
    }
  },

...

}

配置后遇到报错:

.bezierEasingMixin();

配置如下

module.exports = { ... css: { loaderOptions: { less: { javascriptEnabled: true, } } } ...

仍然报错

options has an unknown property ‘javascriptEnabled’. These properties are valid:

vue脚手架4.x的需要用lessOptions进行包裹,再次进行配置

module.exports = {

...

  css: {

    loaderOptions: {

      less: {

        lessOptions: {

          javascriptEnabled: true

        }

      }

    }

  },

...

}
至此完成,在main.js中 引入和注册
import { Button } from 'ant-design-vue';

Vue.component(Button.name, Button);

发表评论

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