前言
最近很久没在博客园发博客了，最近每天上班，休息时候就是玩下最近学的一些运维知识，总算对docker有点熟悉了。
因为公司项目前端压力较大，最近也是要求后端帮忙分担下前端的压力。
目前前端技术选型是Vue，上次玩Vue都是3年以前了，基本上忘记的差不多了。
趁着下班时间在Ant Design Vue官网 https://www.antdv.com/docs/vue/use-with-vue-cli-cn/
按照教程搭建了一个vue项目，采取按需加载方式对模块进行独立加载。
下面是各项组件版本
vue-cli版本为 ： @vue/cli 4.3.1
项目组件版本如下：
| 组件名称 | 版本 |
|---|---|
| ant-design-vue | ^1.5.6 |
| babel-plugin-import | ^1.13.0 |
| core-js | ^3.6.4 |
| vue | ^2.6.11 |
实在是跟着官网一步一步走的，实际运行起来还能报错~ 也是醉了~~ 这里写一篇博客记录下，方便后续自己再要使用时有个参考。
错误如下
ERROR Failed to compile with 2 errors Failed to resolve loader: less-loader You may need to install it. Failed to resolve loader: less-loader You may need to install it.
解决方式有两种
1、更新项目根目录下的babel.config.js内容，将 style: true更改为 style: "css"
更改前:
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
"import",
{
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: true
}
]
]
}
更改后：
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
"import",
{
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: "css"
}
]
]
}
2、配置vue.config.js (通过Vue-cli脚手架创建的项目默认没有带该配置文件，自己在项目根目录下创建此文件)
写入以下内容
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
// important extra layer for less-loader^6.0.0
javascriptEnabled: true
}
}
}
}
}
再执行如下命令:
npm i less-loader
ok~搞定