shao_ye_de_cang_ku/vue.config.js

/**
 * @description vue.config.js全局配置
 */
const path = require("path");
const proxy = require("./proxy.config.json");

const {
  /*  baseURL, */
  publicPath,
  assetsDir,
  outputDir,
  transpileDependencies,
  title,
  abbreviation,
  devPort,
  providePlugin,
  build7z,
  buildGzip,
  imageCompression,
} = require("./src/config");
const rely = require("vue-plugin-rely");
const { webpackBarName, webpackBanner } = require("./vab.config");
const { version, author } = require("./package.json");
const Webpack = require("webpack");
const WebpackBar = require("webpackbar");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const dayjs = require("dayjs");
const dateTime = dayjs().format("YYYY-M-D HH:mm:ss");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["html", "js", "css", "svg"];
process.env.VUE_APP_TITLE = title;
process.env.VUE_APP_AUTHOR = author;
process.env.VUE_APP_RANDOM = `${dayjs()}-${process.env.VUE_GITHUB_USER_NAME}`;
process.env.VUE_APP_UPDATE_TIME = dateTime;
process.env.VUE_APP_VERSION = version;
process.env.VUE_APP_RELY = rely;
const resolve = (dir) => {
  return path.join(__dirname, dir);
};

module.exports = {
  publicPath,
  assetsDir,
  outputDir,
  lintOnSave: false,
  transpileDependencies,
  devServer: {
    disableHostCheck: true,
    // allowedHosts: ['www.shbpms.com'],
    hot: true,
    port: devPort,
    open: false,
    proxy: proxy,
    noInfo: false,
    overlay: {
      warnings: false,
      errors: false,
    },
    host: "0.0.0.0",
    // 注释掉的地方是前端配置代理访问后端的示例
    // baseURL必须为/xxx，而不是后端服务器，请先了解代理逻辑，再设置前端代理
    // ！！！一定要注意！！！
    // 1.这里配置了跨域及代理只针对开发环境生效
    // 2.不建议你在前端配置跨域，建议你后端配置Allow-Origin,Method,Headers，放行token字段，一步到位
    // 3.后端配置了跨域，就不需要前端再配置，会发生Origin冲突
    // proxy: {
    //   [baseURL]: {
    //     target: `http://你的后端接口地址`,
    //     ws: true,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       ['^' + baseURL]: '',
    //     },
    //   },
    // },
    after: require("./mock"),
  },
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    },
    iconPaths: {
      favicon32: "favicon.ico",
      favicon16: "favicon.ico",
      appleTouchIcon: "favicon.ico",
      maskIcon: "favicon.ico",
      msTileImage: "favicon.ico",
    },
    themeColor: "#ffffff",
    msTileColor: "#ffffff",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    manifestOptions: {
      name: "生物样品库安全管理系统",
      short_name: "生物样品库安全管理系统",
      background_color: "#ffffff",
    },
  },
  configureWebpack() {
    return {
      resolve: {
        alias: {
          "~": resolve("."),
          "@": resolve("src"),
          "@/modules": resolve("src/modules"),
        },
      },
      plugins: [
        new Webpack.ProvidePlugin(providePlugin),
        new WebpackBar({
          name: webpackBarName,
        }),
      ],
    };
  },
  chainWebpack(config) {
    config.resolve.symlinks(true);
    config.module.rule("svg").exclude.add(resolve("src/icon"));
    config.module
      .rule("vabIcon")
      .test(/\.svg$/)
      .include.add(resolve("src/icon"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ symbolId: "vab-icon-[name]" });
    config.when(process.env.NODE_ENV === "development", (config) => {
      config.devtool("source-map");
    });
    config.when(process.env.NODE_ENV === "production", (config) => {
      config.performance.set("hints", false);
      config.devtool("none");
      config.optimization.splitChunks({
        automaticNameDelimiter: "-",
        chunks: "all",
        cacheGroups: {
          chunk: {
            name: "vab-chunk",
            test: /[\\/]node_modules[\\/]/,
            minSize: 131072,
            maxSize: 524288,
            chunks: "async",
            minChunks: 2,
            priority: 10,
          },
          vue: {
            name: "vue",
            test: /[\\/]node_modules[\\/](vue(.*)|core-js)[\\/]/,
            chunks: "initial",
            priority: 20,
          },
          elementUI: {
            name: "element-ui",
            test: /[\\/]node_modules[\\/]element-ui(.*)[\\/]/,
            priority: 30,
          },
          extra: {
            name: "vab-extra",
            test: resolve("src/extra"),
            priority: 40,
          },
          // 根据使用模块抽取公共代码
          echarts: {
            name: "echarts",
            test: /[\\/]node_modules[\\/](echarts|zrender|tslib)[\\/]/,
            priority: 50,
          },
        },
      });
      config
        .plugin("banner")
        .use(Webpack.BannerPlugin, [`${webpackBanner}${dateTime}`]);
      if (imageCompression)
        config.module
          .rule("images")
          .use("image-webpack-loader")
          .loader("image-webpack-loader")
          .options({
            bypassOnDebug: true,
          })
          .end();
      if (buildGzip)
        config.plugin("compression").use(CompressionWebpackPlugin, [
          {
            filename: "[path][base].gz[query]",
            algorithm: "gzip",
            test: new RegExp(
              "\\.(" + productionGzipExtensions.join("|") + ")$"
            ),
            threshold: 8192,
            minRatio: 0.8,
          },
        ]);
      if (build7z)
        config.plugin("fileManager").use(FileManagerPlugin, [
          {
            events: {
              onEnd: {
                archive: [
                  {
                    source: `./${outputDir}`,
                    destination: `./${outputDir}/${abbreviation}_${dayjs().unix()}.zip`,
                  },
                ],
              },
            },
          },
        ]);
    });
  },
  runtimeCompiler: true,
  productionSourceMap: false,
  css: {
    requireModuleExtension: true,
    sourceMap: true,
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" },
        additionalData(content, loaderContext) {
          const { resourcePath, rootContext } = loaderContext;
          const relativePath = path.relative(rootContext, resourcePath);
          if (
            relativePath.replace(/\\/g, "/") !==
            "src/vab/styles/variables/variables.scss"
          )
            return (
              '@import "~@/vab/styles/variables/variables.scss";' + content
            );
          return content;
        },
      },
    },
  },
};