newybygadmin/vue.config.js

const Setting = require("./src/setting.env");

// 引入打包分析文件
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

// 引入Gzip压缩文件
const CompressionPlugin = require("compression-webpack-plugin");
 
// 引入js打包工具
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");



// 拼接路径
const resolve = (dir) => require("path").join(__dirname, dir);

// 增加环境变量
process.env.VUE_APP_VERSION = require("./package.json").version;
process.env.VUE_APP_BUILD_TIME = require("dayjs")().format("YYYY-M-D HH:mm:ss");

module.exports = {
  publicPath: Setting.publicPath,
  lintOnSave: Setting.lintOnSave,
  outputDir: Setting.outputDir,
  assetsDir: Setting.assetsDir,
  runtimeCompiler: true,
  productionSourceMap: false, //关闭生产环境下的SourceMap映射文件
  devServer: {
    publicPath: Setting.publicPath,
    
  },

  // 打包优化
  configureWebpack: (config) => {
    const pluginsPro = [
      new BundleAnalyzerPlugin()
    ];

     pluginsPro.push(
        new CompressionPlugin({
          algorithm: "gzip",
          test: /\.js$|\.html$|\.css$/, // 匹配文件名
          minRatio: 0.8, // 压缩率小于1才会压缩
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
        })
      );

    pluginsPro.push(
        // js文件压缩
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true,
              drop_console: true, //生产环境自动删除console
              pure_funcs: ["console.log"] //移除console
            },
          },
          sourceMap: false,
          parallel: true //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
        })
      );
     
    if (process.env.NODE_ENV === "production") {
      config.plugins = [...config.plugins, ...pluginsPro];

    } 
  },

  css: {
    sourceMap: false, // css sourceMap 配置
    loaderOptions: {
      less: {},
    },
  },
  
  transpileDependencies: ["view-design", "iview", "vuedraggable"],
  // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-service/lib/config/base.js

  chainWebpack: (config) => {
    /**
     * 删除懒加载模块的 prefetch preload，降低带宽压力
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
     * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
     */
    config.plugins.delete("prefetch").delete("preload");
    // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
    config.resolve.symlinks(true);
    config
      // 开发环境
      .when(
        process.env.NODE_ENV === "development",
        // sourcemap不包含列信息
        (config) => config.devtool("cheap-source-map")
      )
      // 非开发环境
      .when(process.env.NODE_ENV !== "development", (config) => {});
    // 不编译 iView Pro
    config.module
      .rule("js")
      .test(/\.jsx?$/)
      .exclude.add(resolve("src/libs/iview-pro"))
      .end();
    // 使用 iView Loader
    config.module
      .rule("vue")
      .test(/\.vue$/)
      .use("iview-loader")
      .loader("iview-loader")
      .tap(() => {
        return Setting.iviewLoaderOptions;
      })
      .end();
    // markdown
    config.module
      .rule("md")
      .test(/\.md$/)
      .use("text-loader")
      .loader("text-loader")
      .end();
    // i18n
    config.module
      .rule("i18n")
      .resourceQuery(/blockType=i18n/)
      .use("i18n")
      .loader("@kazupon/vue-i18n-loader")
      .end();
    // image exclude
    const imagesRule = config.module.rule("images");
    imagesRule
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .exclude.add(resolve("src/assets/svg"))
      .end();
    // 重新设置 alias
    config.resolve.alias.set("@api", resolve("src/api"));
    // node
    config.node.set("__dirname", true).set("__filename", true);
    // 判断是否需要加入模拟数据
    const entry = config.entry("app");
    if (Setting.isMock) {
      entry.add("@/mock").end();
    }
  },
};