vue按需引入ant-design-vue报错解决方案

通过vue-cli创建的应用，安装了ant-design-vue,并通过babel-plugin-import进行按需引入。

错误如下：

yarn serve
yarn run v1.22.10
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                           下午10:48:31

 error  in ./node_modules/ant-design-vue/es/button/style/index.less

Syntax Error: 

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      Error in /Users/tony/study/antd-demo/node_modules/ant-design-vue/es/style/color/bezierEasing.less (line 110, column 0)


 @ ./node_modules/ant-design-vue/es/button/style/index.less 4:14-207 15:3-20:5 16:22-215
 @ ./node_modules/ant-design-vue/es/button/style/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.3.24:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

安装完成后在vue页面中应用Button组件，启动项目报错如下：

image.png

运行yarn add less less-loader -D安装依赖后运行yarn serve报错如下，是由于less-loader版本过高导致的问题。

image.png image.png

对less-loader进行降级处理：

image.png

在vue.config.js中进行如下配置：

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

完美解决：

image.png