V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lework1234
V2EX  ›  Vue.js

请教一个问题:在升级到 vuecli4 的时候,按需加载"@ant-design/icons"出现找不到的情况?

  •  
  •   lework1234 · 2020-04-21 09:43:38 +08:00 · 3655 次点击
    这是一个创建于 1663 天前的主题,其中的信息可能已经有所发展或是发生改变。

    package.json

      "dependencies": {
        "@ant-design/icons": "^4.0.3",
        "@babel/runtime": "^7.9.2",
        "amfe-flexible": "^2.2.1",
        "ant-design-vue": "^1.4.12",
        "axios": "^0.19.2",
        "babel-plugin-import": "^1.13.0",
        "babel-polyfill": "^6.26.0",
        "core-js": "^3.6.4",
        "highlight.js": "^9.18.1",
        "less": "^3.11.1",
        "less-loader": "^5.0.0",
        "vue": "^2.6.11",
        "vue-markdown": "^2.2.4",
        "vue-router": "^3.1.5",
        "vuex": "^3.1.2"
      }
    

    vue.config.js

    const path = require("path");
    const resolve = dir => require("path").join(__dirname, dir);
    const CompressionWebpackPlugin = require("compression-webpack-plugin"); //Gzip
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
      .BundleAnalyzerPlugin; //Webpack 包文件分析器
    const CopyWebpackPlugin = require("copy-webpack-plugin");
    
    const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); //env
    const isAnalyz = process.env.IS_ANALYZ === "true";
    
    module.exports = {
      // publicPath: "./", //打包后的位置(如果不设置这个静态资源会报 404)
      publicPath:
        process.env.NODE_ENV === "production" ? process.env.API_ROOT : "./",
      outputDir: "docs", //打包后的目录名称
      assetsDir: "static", //静态资源目录名称
      productionSourceMap: false, //去掉打包的时候生成的 map 文件
      lintOnSave: true, // eslint-loader 是否在保存的时候检查
      filenameHashing: false,
      runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
      parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader 。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
      pwa: {}, // 向 PWA 插件传递选项。
      // css 相关配置
      css: {
        // 是否使用 css 分离插件 ExtractTextPlugin
        extract: false,
        // 开启 CSS source maps?
        sourceMap: !IS_PROD,
        // css 预设器配置项
        loaderOptions: {
          less: {
            javascriptEnabled: true
          }
        }
      },
      chainWebpack: config => {
        // 打包分析
        // if `IS_ANALYZ` env is TRUE on report bundle info
        isAnalyz &&
          config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
            {
              analyzerMode: "static"
            }
          ]);
        // 修复 HMR
        config.resolve.symlinks(true);
    
        // 如果使用多页面打包,使用 vue inspect --plugins 查看 html 是否在结果数组中
        // config.plugin("html").tap(args => {
        //   // 修复 Lazy loading routes Error
        //   args[0].chunksSortMode = "none";
        //   return args;
        // });
    
        config.resolve.extensions
          .add(".js")
          .add(".vue")
          .add(".json");
    
        // 添加别名
        config.resolve.alias
          .set("vue$", "vue/dist/vue.esm.js")
          .set("@", resolve("src"))
          .set("@components", resolve("src/components"))
          .set("@views", resolve("src/views"))
          .set("@router", resolve("src/router"))
          .set("@store", resolve("src/store"));
          // .set("@ant-design/icons/lib/dist$", resolve("src/utils/antdIcon.js"));
    
        if (IS_PROD) {
          // 压缩图片
          // 需要 npm i -D image-webpack-loader
          config.module
            .rule("images")
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
            .use("image-webpack-loader")
            .loader("image-webpack-loader")
            .options({
              mozjpeg: { progressive: true, quality: 65 },
              optipng: { enabled: false },
              pngquant: { quality: [0.65, 0.9], speed: 4 },
              gifsicle: { interlaced: false }
            });
        }
      },
      devServer: {
        // overlay: { // 让浏览器 overlay 同时显示警告和错误
        //   warnings: true,
        //   errors: true
        // },
        // open: false, // 是否打开浏览器
        // host: "localhost",
        // port: "8080", // 代理断就
        // https: false,
        // hotOnly: false, // 热更新
        proxy: {
          "/api": {
            target: "http://hosts/api", // 目标代理接口地址
            secure: false,
            changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端
            // ws: true, // 是否启用 websockets
            pathRewrite: {
              "^/api": "/"
            }
          }
        }
      },
      configureWebpack: config => {
        const plugins = [];
        // 拷贝 static 目录
        plugins.push(
          new CopyWebpackPlugin([
            {
              from: path.resolve(__dirname, "static"),
              to: path.resolve(__dirname, "docs/static"),
              ignore: [".*"]
            }
          ])
        );
    
        if (IS_PROD) {
          // 开启 gzip 压缩
          // 需要 npm i -D compression-webpack-plugin
          plugins.push(
            new CompressionWebpackPlugin({
              filename: "[path].gz[query]",
              algorithm: "gzip",
              test: productionGzipExtensions,
              threshold: 10240,
              minRatio: 0.8
            })
          );
        }
        config.resolve = {
          alias: {
            "@ant-design/icons/lib/dist$": path.join(
              __dirname,
              "./src/utils/antdIcon.js"
            )
          }
        };
        config.plugins = [...config.plugins, ...plugins];
      }
    };
    
    

    Repo: https://github.com/lework/lemonitor

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2828 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:10 · PVG 10:10 · LAX 18:10 · JFK 21:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.