const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/',
  // 输出文件目录
  outputDir: 'dist',

  // 静态资源目录
  assetsDir: 'static',
  devServer: {
    hot: true,
    compress: true,
    allowedHosts: 'all',
    headers: {
      //   1. 允许开发环境跨域
      'Access-Control-Allow-Origin': '*'
    },
    historyApiFallback: true,
    open: false,
    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";
        @use "~@/style/antd.scss";
        ` //在每个 .scss 文件顶部自动添加这行代码，无需手动导入
      }
    },
    extract: {
      filename: `css/.[contenthash:8].css`,
      chunkFilename: `css/.[contenthash:8].chunk.css`
    }
  },
  // webpack相关配置
  configureWebpack: {
    // 自定义打包入口

    // 扩展 webpack 配置
    plugins: [
      // 添加插件
    ],
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src')
      }
    }
  },

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

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

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

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