使用Vue-cli4.3 新建Ant Design Vue項目

前言

最近很久沒在博客園發博客了，最近每天上班，休息時候就是玩下最近學的一些運維知識，總算對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~搞定