解决按需引入

babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: [
+    [
+      'import',
+      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' },
+    ], // `style: true` 会加载 less 文件
+  ], // 按需引入组件
+};

package-lock.json

@@ -265,7 +265,6 @@
       "version": "7.14.5",
       "resolved": "https://registry.nlark.com/@babel/helper-module-imports/download/@babel/helper-module-imports-7.14.5.tgz",
       "integrity": "sha1-bRpE32o4yVeqfDEtoHZCnxG0IvM=",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.14.5"
       }
@@ -354,8 +353,7 @@
     "@babel/helper-validator-identifier": {
       "version": "7.14.9",
       "resolved": "https://registry.nlark.com/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.14.9.tgz?cache=0&sync_timestamp=1627804495811&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-validator-identifier%2Fdownload%2F%40babel%2Fhelper-validator-identifier-7.14.9.tgz",
-      "integrity": "sha1-ZlTRcbICT22O4VG/JQlpmRkTHUg=",
-      "dev": true
+      "integrity": "sha1-ZlTRcbICT22O4VG/JQlpmRkTHUg="
     },
     "@babel/helper-validator-option": {
       "version": "7.14.5",
@@ -1167,7 +1165,6 @@
       "version": "7.15.3",
       "resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.3.tgz?cache=0&sync_timestamp=1628666503436&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.15.3.tgz",
       "integrity": "sha1-LhwogMoRjlsvmYgyK9inZWoyUCs=",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1175,8 +1172,7 @@
         "regenerator-runtime": {
           "version": "0.13.9",
           "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.9.tgz",
-          "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=",
-          "dev": true
+          "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
         }
       }
     },
@@ -1229,7 +1225,6 @@
       "version": "7.15.0",
       "resolved": "https://registry.nlark.com/@babel/types/download/@babel/types-7.15.0.tgz",
       "integrity": "sha1-Ya8R8ihsTpxpyo3rX0N1pzxy3L0=",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.14.9",
         "to-fast-properties": "^2.0.0"
@@ -1899,39 +1894,12 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995547052&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-5.3.1.tgz?cache=0&sync_timestamp=1603921882890&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase%2Fdownload%2Fcamelcase-5.3.1.tgz",
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
           "dev": true
         },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.nlark.com/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1626725891008&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -1973,13 +1941,6 @@
             "universalify": "^0.1.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.nlark.com/json5/download/json5-1.0.1.tgz",
@@ -2021,63 +1982,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.5.0",
-          "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.5.0.tgz?cache=0&sync_timestamp=1628666767864&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.5.0.tgz",
-          "integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "4.1.2",
-              "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646655305&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
-              "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-              }
-            },
-            "json5": {
-              "version": "2.2.0",
-              "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.2.0.tgz?cache=0&sync_timestamp=1612146875530&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson5%2Fdownload%2Fjson5-2.2.0.tgz",
-              "integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "minimist": "^1.2.5"
-              }
-            },
-            "loader-utils": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-              "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-              }
-            }
-          }
-        },
         "webpack-bundle-analyzer": {
           "version": "3.9.0",
           "resolved": "https://registry.nlark.com/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.9.0.tgz",
@@ -2900,6 +2804,15 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-import": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-import/download/babel-plugin-import-1.13.3.tgz",
+      "integrity": "sha1-nbu6fRrHK9QSkXqDDUReAJQdJtc=",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.2.2",
       "resolved": "https://registry.nlark.com/babel-plugin-polyfill-corejs2/download/babel-plugin-polyfill-corejs2-0.2.2.tgz",
@@ -11858,8 +11771,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.nlark.com/to-fast-properties/download/to-fast-properties-2.0.0.tgz?cache=0&sync_timestamp=1628418855671&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fto-fast-properties%2Fdownload%2Fto-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
     "to-object-path": {
       "version": "0.3.0",
@@ -12529,6 +12441,75 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.5.0",
+      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.5.0.tgz?cache=0&sync_timestamp=1628666767864&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.5.0.tgz",
+      "integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995547052&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646655305&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
+          "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703455199&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "ali-oss": "^6.16.0",
     "ant-design-vue": "^1.7.5",
     "axios": "^0.21.1",
+    "babel-plugin-import": "^1.13.3",
     "core-js": "^3.6.5",
     "echarts": "^5.1.2",
     "js-cookie": "^2.2.1",

vue.config.js

@@ -7,40 +7,38 @@
 // }
 
 module.exports = {
-    runtimeCompiler: true,
-    // // 放置静态资源的地方 (js/css/img/font/...)
-    // assetsDir: 'static',
-  
-    // // 是否为生产环境构建生成 source map？
-    productionSourceMap: true,
-  
-    // // 配置 webpack-dev-server 行为。
-    // devServer: {
-    //   open: true
-    // },
-    // publicPath: './',
-  
-    // // 将构建好的文件输出到哪里
-    // outputDir: 'dist',
-    // chainWebpack: config => {
-    //   config.resolve.alias
-    //     .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
-    //   // .set('_c', resolve('src/components'))
-    //   // .set('_conf', resolve('src/config'))
-    // },
-  
-    // pluginOptions: {
-    //   'style-resources-loader': {
-    //     preProcessor: 'less',
-    //     patterns: [path.resolve(__dirname, './src/assets/css/variable.less')]
-    //   }
-    // }
-    // chainWebpack: config => {
-    //   // 查看打包文件体积大小
-    //   config
-    //     .plugin('webpack-bundle-analyzer')
-    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
-    // }
-  }
-  
+  runtimeCompiler: true,
+  // // 放置静态资源的地方 (js/css/img/font/...)
+  // assetsDir: 'static',
 
+  // // 是否为生产环境构建生成 source map？
+  productionSourceMap: true,
+
+  // // 配置 webpack-dev-server 行为。
+  // devServer: {
+  //   open: true
+  // },
+  // publicPath: './',
+
+  // // 将构建好的文件输出到哪里
+  // outputDir: 'dist',
+  // chainWebpack: config => {
+  //   config.resolve.alias
+  //     .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
+  //   // .set('_c', resolve('src/components'))
+  //   // .set('_conf', resolve('src/config'))
+  // },
+
+  // pluginOptions: {
+  //   'style-resources-loader': {
+  //     preProcessor: 'less',
+  //     patterns: [path.resolve(__dirname, './src/assets/css/variable.less')]
+  //   }
+  // }
+  chainWebpack: (config) => {
+    // 查看打包文件体积大小
+    config
+      .plugin('webpack-bundle-analyzer')
+      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
+  },
+};