vue-cli 4 搭建 ant-design-vue 按需引入

前人踩坑，后人乘凉。

由于官网没给出 vue-cli 4 以上版本的按需引入步骤，只好按照 vue-cli 3 的方式来引入，但是过程并不是很顺利。

按照官网步骤一顿操作下来，安装 ant-design-vue、babel-plugin-import , npm run serve 后。

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

Syntax Error: Error: Cannot find module 'less-loader'

好吧，那就装下这个吧。

npm i -D less-loader

装完，报错。

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

Syntax Error: TypeError: this.getOptions is not a function

看样子是版本过高导致，那换个低点的版本。

npm i -D less-loader@9.0.0 
// 经测试最高 9.0.0 不报错

重新 npm run serve 后，继续报错。

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

Syntax Error: Error: Cannot find module 'less'

那就再装一下吧。

npm i -D less

装完后，报了一样的错。

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

Syntax Error: TypeError: this.getOptions is not a function

也是版本过高，那退个低版本吧。

…… 但是连续跳了几个低版本，还是不行。最后想到还是less-loader 版本问题。得降到 7.3.0。

npm i -D less-loader@7.3.0 

重新 npm run serve 后，继续报错，但是不再是那个找不到方法函数的错了。

error  in ./node_modules/ant-design-vue/es/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?

这个错就跟以前遇到的问题类似了，详见less-loader 升级 6.X 后在 webpack 配置 javascriptEnabled 报错解决。

这里直接贴出解决方法：在项目根目录新建 vue.config.js ，接着加入以下代码。

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

重新运行后，项目正常运行了。