import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
export default defineConfig({
  plugins: [vue()], // 使用 Vue 插件
  base: './', // 部署應(yīng)用時的基本 URL。默認是 '/'，如果部署到子路徑，需要修改 [3](@ref)
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 設(shè)置路徑別名，簡化導(dǎo)入 [4,5](@ref)
    },
  },
  server: {
    host: '0.0.0.0', // 指定服務(wù)器應(yīng)該監(jiān)聽哪個 IP 地址
    port: 3000, // 指定開發(fā)服務(wù)器端口 [4](@ref)
    open: true, // 在服務(wù)器啟動時自動打開瀏覽器 [4](@ref)
    proxy: { // 配置自定義代理規(guī)則 [4](@ref)
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist', // 打包輸出目錄 [3](@ref)
    assetsDir: 'assets', // 靜態(tài)資源存放目錄 [3](@ref)
    sourcemap: false, // 是否生成 sourcemap 文件，生產(chǎn)環(huán)境建議關(guān)閉以減小體積 [4](@ref)
    minify: 'terser', // 代碼壓縮工具，可選 'terser' 或 'esbuild'，默認為 'esbuild' [5](@ref)
    terserOptions: { // 傳遞給 Terser 的更多 minify 選項 [6](@ref)
      compress: {
        drop_console: true, // 移除 console
        drop_debugger: true, // 移除 debugger
      },
    },
    rollupOptions: { // 自定義底層的 Rollup 打包配置 [4](@ref)
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // 代碼分割后的 chunk 文件命名
        entryFileNames: 'js/[name]-[hash].js', // 入口文件命名
        assetFileNames: '[ext]/[name]-[hash].[ext]', // 靜態(tài)資源文件命名（如字體、圖片）[5](@ref)
      },
    },
  },
  css: {
    preprocessorOptions: { // CSS 預(yù)處理器相關(guān)配置 [4](@ref)
      scss: {
        additionalData: `@import "@/styles/variables.scss";`, // 全局注入 SCSS 變量或 mixin
      },
    },
  },
})

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
 
module.exports = defineConfig({
  transpileDependencies: true, // 如果需要 Babel 顯式轉(zhuǎn)譯某些依賴，可以在此列出
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/', // 部署應(yīng)用包時的基本 URL，類似于 Vite 的 base [8](@ref)
  outputDir: 'dist', // 構(gòu)建文件輸出目錄 [9](@ref)
  assetsDir: 'static', // 放置生成的靜態(tài)資源的目錄 [9](@ref)
  indexPath: 'index.html', // 指定生成的 index.html 的輸出路徑 [9](@ref)
  filenameHashing: true, // 靜態(tài)資源文件名是否包含 hash 以控制緩存 [9](@ref)
  productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 source map，關(guān)閉可加速構(gòu)建 [8](@ref)
  configureWebpack: { // 簡單調(diào)整 Webpack 配置，會合并到最終配置 [10](@ref)
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  },
  chainWebpack: (config) => { // 基于 webpack-chain 的鏈式操作，用于更細粒度的控制 [10](@ref)
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer('terser').tap((args) => {
        args[0].terserOptions.compress.drop_console = true
        return args
      })
    }
  },
  devServer: {
    port: 8080, // 開發(fā)服務(wù)器端口 [8](@ref)
    open: true, // 啟動后是否打開瀏覽器 [8](@ref)
    proxy: { // 代理配置，解決開發(fā)環(huán)境跨域 [8](@ref)
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
})

VITE_APP_TITLE=我的應(yīng)用
VITE_API_BASE_URL=https://api.example.com

VUE_APP_TITLE=我的應(yīng)用
VUE_APP_API_BASE_URL=https://api.example.com