背景

按照 Ant Design of Vue 文档的提示，安装 vue-cli 和 ant-design-vue 并新建了项目后，页面如期显示。

可是为了更好的性能，我们还需要配置 按需加载组件代码。但是按照要求修改后，再此刷新页面发现报错了！

看样子只是缺了一个库，试着安装一下

(base) PS C:\Users\xxx\Desktop\oa-ssc> npm i -D less-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: oa-ssc@0.1.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.46.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from less-loader@10.2.0
npm ERR! node_modules/less-loader
npm ERR!   dev less-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See D:\NodeJS\node_cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\NodeJS\node_cache\_logs\2021-11-22T13_27_04_650Z-debug.log

安装也报错了，从错误内容看，应该是版本问题导致的。从往上也搜了很多解决办法，这里提供一个我的方案。

解决办法

1. 降级 less less-loader 版本

npm i -D less@3.0.4 less-loader@5.0.0

2. 配置一下文件。找到（没有则创建）vue.config.js 文件，添加下面的内容

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