import imgUrl from "./images/img.png";
import imgUrl from "/src/images/img.png"; // 相对于项目根路径

import workletURL from 'extra-scalloped-border/worklet.js?url' // 引入为url
import shaderString from './shader.glsl?raw' // 引入为字符串

const module = new URL("@/xxx", import.meta.url)

// 动态URL
export function getAssetFileURL(url) {
  return new URL(`../assets/files/${url}`, import.meta.url).href;
}

// 非静态URL字符串无法转换
const imgUrl = new URL(imagePath, import.meta.url).href; // Vite无法转换

// SSR环境无法使用 new URL(url, import.meta.url)

const modules = import.meta.glob('./dir/*.js')
// modules
{
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

// 懒加载
modules[path]().then((mod) => {
  console.log(path, mod)
})

const gameModules = import.meta.glob(
  "@/assets/img/game/**/*.png", { eager: true }
);
export function getAssetsGameFile(url) {
  return gameModules[`/src/assets/${url}`].default;
}

// 多目录
const modules = import.meta.glob(['./dir/*.js', './another/*.js'])
// 从结果中排除
const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

// vite.config.js
import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
  plugins: [splitVendorChunkPlugin(function(){
   if (id.includes('node_modules')) {
        return id.toString().split('node_modules/')[1].split('/')[0].toString();
      }
    } 
  )],
})

rollupOptions: {
  output: {
    chunkFileNames: "js/[name]-[hash].js",
    entryFileNames: "js/[name]-[hash].js",
    assetFileNames: "[ext]/[name]-[hash].[ext]",
    // 
    manualChunks: {
      vue: ["vue"],
      vueRouter: ["vue-router"],
      elementPlus: ["element-plus"],
    },
    // 全部
    // manualChunks(id) {
    //   if (id.includes("node_modules")) {
    //     console.log(id);
    //     return id.toString().split("node_modules/")[1].split("/")[0].toString();
    //   }
    // },
  },
}

// vite.config.js
const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html')
      }
    }
  }
})

window.addEventListener('vite:preloadError', (event) => {
  window.reload() // 刷新页面
})

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {  }
})

{
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
      "@pages": resolve(__dirname, "src/pages")  
    }
  }
}

{
  css: {
    preprocessorOptions: {
      less: {
        math: 'parens-division',
      },
      scss: {
        additionalData: `$injectedColor: orange;`,
      },
    },
  },
}

{
  server: {
    proxy: {
      // http://localhost:5173/foo -> http://localhost:3000/foo
      '/admin': 'http://localhost:3000',
      // http://localhost:5173/ai/imagine -> http://www.ai.com/imagine
      '/ai': {
        target: 'http://www.ai.com',
        changeOrigin: true,  // 
        rewrite: (path) => path.replace(/^\/ai/, ''), // 修改路径
      },
      '^/fallback/.*': ... // 正则匹配
    }
  }
}

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import typescript2 from 'rollup-plugin-typescript2'
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    {
      ...image(),
      enforce: 'pre'  // 强制顺序 pre/post(在vite核心插件之前)
    },
    {
      ...typescript2(),
      apply: 'build' // build/serve 模式生产
    }
  ]
})

// vite.config.js
import babel from "vite-babel-plugin";

// export default defineConfig
plugins: [
  babel()
]

import { createHtmlPlugin } from "vite-plugin-html";
// export default defineConfig
plugins: [
  createHtmlPlugin({
    template: "index.html", // 相对于根路径
    inject: {
      data: { build_time: new Date().toLocaleString() },
    },
  })
]

// postcss.config.js
module.exports = {
  plugins: {
    "autoprefixer": {
      overrideBrowserslist: ['last 2 version','>1%']
    },
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      exclude: [/node_modules/],
      mediaQuery: true,
    },
  },
};

// vite.config.js
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
        /**
         * 自定义插入位置
         * @default: body-last
         */
        inject?: 'body-last' | 'body-first'
        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}

// main.js
import 'virtual:svg-icons-register'
import SvgIcon from '@/base-ui/SvgIcon/index.vue';

const app = createApp(App);
app.component('SvgIcon', SvgIcon);

import svgr from "vite-plugin-svgr;
export default defineConfig(({ mode }) => {
  plugins: [ svgLoader() ]
});

import { defineComponent, defineAsyncComponent, h } from "vue";

const svgModules = import.meta.glob("./svg/**/*.svg", {
  query: "?component",
});

export default defineComponent({
  name: "SvgIcon",
  props: {
    name: { type: String, default: "" },
  },
  setup(props) {
    const SvgComponent = defineAsyncComponent(svgModules[`./svg/${props.name}.svg`]);
    return () => h(SvgComponent);
  },
});

// vite.config.js
rollupOptions: {
  output: {
    chunkFileNames: "js/[name]-[hash].js",
    entryFileNames: "js/[name]-[hash].js",
    assetFileNames: "[ext]/[name]-[hash].[ext]",
  },
},

// vite.config.js
import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
  plugins: [splitVendorChunkPlugin(function(){
   if (id.includes('node_modules')) {
        return id.toString().split('node_modules/')[1].split('/')[0].toString();
      }
    }
  )],
})