const { defineConfig } = require("@vue/cli-service");
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "/your-project/" : "/",
  // 输出文件目录
  outputDir: "dist",

  // 静态资源目录
  assetsDir: "static",
  devServer: {
    headers: {
      //   1. 允许开发环境跨域
      "Access-Control-Allow-Origin": "*",
    },
    historyApiFallback: true,
    open: true,
    port: 8080,

    client: {
      overlay: {
        runtimeErrors: (error) => {
          const ignoreErrors = [
            "ResizeObserver loop limit exceeded",
            "ResizeObserver loop completed with undelivered notifications.",
          ];
          if (ignoreErrors.includes(error.message)) {
            return false;
          }
          return true;
        },
      },
    },
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "~@/style/color.scss";`,
      },
    },
    extract: {
      filename: `css/.[contenthash:8].css`,
      chunkFilename: `css/.[contenthash:8].chunk.css`,
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.join(__dirname, "src"),
      },
    },
  },

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  lintOnSave: process.env.NODE_ENV !== "production",

  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,

  // 生产环境的 source map
  productionSourceMap: true,

  // webpack相关配置
  configureWebpack: {
    // 自定义打包入口
    entry: "./src/main.js",

    // 扩展 webpack 配置
    plugins: [
      // 添加插件
    ],
  },

  // 第三方插件配置
  pluginOptions: {
    // ...
  },
});