const { defineConfig } = require("@vue/cli-service");

const { NODE_ENV, VUE_APP_ENV, VUE_APP_BASE_URL, VUE_APP_PROXY_URL } = process.env;
const { info } = console;
const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);

info();
info("\x1b[33m%s\x1b[0m", `🏭--NODE环境(NODE_ENV): ${NODE_ENV}`);
info("\x1b[36m%s\x1b[0m", `🏠--APP环境(VUE_APP_ENV): ${VUE_APP_ENV}`);
info("\x1b[36m%s\x1b[0m", `🔗--APP基础URL(VUE_APP_BASE_URL): ${VUE_APP_BASE_URL}`);
info("\x1b[36m%s\x1b[0m", `😈--APP代理URL(VUE_APP_PROXY_URL): ${VUE_APP_PROXY_URL}`);
info();

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: NODE_ENV === "development" ? "/" : "./",
  outputDir: VUE_APP_ENV === "production" ? "dist-production" : "dist-production-test",
  indexPath: "index.html",
  filenameHashing: true,
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "vue移动端模板",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
  },
  devServer: {
    proxy: VUE_APP_PROXY_URL,
    open: true,
  },
  pluginOptions: {
    // 将指定的全局样式文件注入到每个组件的SCSS样式中
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [resolve("src/styles/variables.scss")],
    },
  },
  // 定制vant主题
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            "nav-bar-arrow-size": "18px",
            "nav-bar-icon-color": "#000",
          },
        },
      },
      scss: {
        // 引入sass全局变量
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
});