import { fileURLToPath, URL } from "node:url";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig(({ mode }) => {
  // 取得 Vite 環境變數
  const env = loadEnv(mode, process.cwd()).VUE_APP_API_URL;

  return{
    plugins: [vue()],
    transpileDependencies: true,
    // 設定路徑別名
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)), // EX:"/@/components/Header.vue"
        '/images': 'src/assets/images', // EX:<img src="/images/logo.png">
      }
    },
    devServer: {
      host: 'localhost',
      port: 58249,
      proxy: {
        '/api': {
          target: env, // 指向後台伺服器位置
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ''), // 修改實際的 Request Url，將 '/api' 用 '' 替代
        }
      },
      // hmr: {
      //   host: 'localhost',
      //   port: 3001,
      //   protocol: 'wss',
      // }
    },
    build: {
      commonjsOptions: {
        transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
      }
    },
  }
});