import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import postcssPxToViewport from 'postcss-px-to-viewport'
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";
 
export default defineConfig({
  plugins: [
    vue(),
    //頁(yè)面自動(dòng)引入vue 插件
    AutoImport({
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
    //element plus按需自動(dòng)引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    //element plus按需自動(dòng)引入
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          viewportWidth: 1920 //---基于1920寬度為100vw
        })
      ]
    }
  },
  build: {
    minify: "terser", // 必須開(kāi)啟：使用terserOptions才有效果
    terserOptions: {
      compress: {
        //生產(chǎn)環(huán)境時(shí)移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), 
      // 注意一定不要隨意命名，a b c這樣的，項(xiàng)目的目錄也不能為關(guān)鍵字保留字Ｗ锼激涤！
      "comp": resolve(__dirname, "src/components"),
      // 配置圖片要這樣引用也可以自定義方法引入圖片靜態(tài)資源
      "/img": "./src/assets",
    },
  },
  // 跨域
  server: {
    //使用IP能訪問(wèn)
    host: "0.0.0.0",
    // 熱更新
    hmr: true,
    //設(shè)為 true 時(shí)若端口已被占用則會(huì)直接退出栏尚，而不是嘗試下一個(gè)可用端口
    strictPort: false,
    //自定義代理規(guī)則
    proxy: {
      // 選項(xiàng)寫法
      "/api": {
        target: "",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

vite常用基本配置

{
  root: process.cwd(), // 項(xiàng)目根目錄（index.html 文件所在的位置）,
  base: '/', // 開(kāi)發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑 配置引入相對(duì)路徑
  mode: 'development', // 模式
  plugins: [vue()], // 需要用到的插件數(shù)組
  publicDir: 'public', // 靜態(tài)資源服務(wù)的文件夾
  cacheDir: 'node_modules/.vite', // 存儲(chǔ)緩存文件的目錄
  resolve: {
    alias: [ // 文件系統(tǒng)路徑別名
      {
        find: /\/@\//,
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 強(qiáng)制 Vite 始終將列出的依賴項(xiàng)解析為同一副本
    conditions: [], // 解決程序包中 情景導(dǎo)出 時(shí)的其他允許條件
    mainFields: [], // 解析包入口點(diǎn)嘗試的字段列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 導(dǎo)入時(shí)想要忽略的擴(kuò)展名列表
    preserveSymlinks: false, // 啟用此選項(xiàng)會(huì)使 Vite 通過(guò)原始文件路徑確定文件身份
  },
  css: {
    modules: {
      scopeBehaviour: 'global' | 'local',
      // ...
    },
    postcss: '', // 內(nèi)聯(lián)的 PostCSS 配置 如果提供了該內(nèi)聯(lián)配置胚迫，Vite 將不會(huì)搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的預(yù)處理器選項(xiàng)
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },
  json: {
    namedExports: true, // 是否支持從.json文件中進(jìn)行按名導(dǎo)入
    stringify: false, //  開(kāi)啟此項(xiàng)，導(dǎo)入的 JSON 會(huì)被轉(zhuǎn)換為 export default JSON.parse("...") 會(huì)禁用按名導(dǎo)入
  },
  esbuild: { // 最常見(jiàn)的用例是自定義 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  },
  assetsInclude: ['**/*.gltf'], // 指定額外的 picomatch 模式 作為靜態(tài)資源處理
  logLevel: 'info', // 調(diào)整控制臺(tái)輸出的級(jí)別 'info' | 'warn' | 'error' | 'silent'
  clearScreen: true, // 設(shè)為 false 可以避免 Vite 清屏而錯(cuò)過(guò)在終端中打印某些關(guān)鍵信息
  envDir: '/', // 用于加載 .env 文件的目錄
  envPrefix: [], // 以 envPrefix 開(kāi)頭的環(huán)境變量會(huì)通過(guò) import.meta.env 暴露在你的客戶端源碼中
  server: {
    host: '127.0.0.1', // 指定服務(wù)器應(yīng)該監(jiān)聽(tīng)哪個(gè) IP 地址
    port: 5000, // 指定開(kāi)發(fā)服務(wù)器端口
    strictPort: true, // 若端口已被占用則會(huì)直接退出
    https: false, // 啟用 TLS + HTTP/2
    open: true, // 啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開(kāi)應(yīng)用程序
    proxy: { // 配置自定義代理規(guī)則
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true, // 配置 CORS
    force: true, // 強(qiáng)制使依賴預(yù)構(gòu)建
    hmr: { // 禁用或配置 HMR 連接
      // ...
    },
    watch: { // 傳遞給 chokidar 的文件系統(tǒng)監(jiān)聽(tīng)器選項(xiàng)
      // ...
    },
    middlewareMode: '', // 以中間件模式創(chuàng)建 Vite 服務(wù)器
    fs: {
      strict: true, // 限制為工作區(qū) root 路徑以外的文件的訪問(wèn)
      allow: [], // 限制哪些文件可以通過(guò) /@fs/ 路徑提供服務(wù)
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 開(kāi)發(fā)服務(wù)器提供敏感文件的黑名單
    },
    origin: 'http://127.0.0.1:8080/', // 用于定義開(kāi)發(fā)調(diào)試階段生成資產(chǎn)的 origin
  },
  build: {
    target: ['modules'], // 設(shè)置最終構(gòu)建的瀏覽器兼容目標(biāo)
    polyfillModulePreload: true, // 是否自動(dòng)注入 module preload 的 polyfill
    outDir: 'dist', // 指定輸出路徑
    assetsDir: 'assets', // 指定生成靜態(tài)文件目錄
    assetsInlineLimit: '4096', // 小于此閾值的導(dǎo)入或引用資源將內(nèi)聯(lián)為 base64 編碼
    cssCodeSplit: true, // 啟用 CSS 代碼拆分
    cssTarget: '', // 允許用戶為 CSS 的壓縮設(shè)置一個(gè)不同的瀏覽器 target 與 build.target 一致
    sourcemap: false, // 構(gòu)建后是否生成 source map 文件
    rollupOptions: {}, // 自定義底層的 Rollup 打包配置
    lib: {}, // 構(gòu)建為庫(kù)
    manifest: false, // 當(dāng)設(shè)置為 true禽拔，構(gòu)建后將會(huì)生成 manifest.json 文件
    ssrManifest: false, // 構(gòu)建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的構(gòu)建
    minify: 'esbuild', // 指定使用哪種混淆器
    terserOptions: {}, // 傳遞給 Terser 的更多 minify 選項(xiàng)
    write: true, // 啟用將構(gòu)建后的文件寫入磁盤
    emptyOutDir: true, // 構(gòu)建時(shí)清空該目錄
    brotliSize: true, // 啟用 brotli 壓縮大小報(bào)告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 設(shè)置為 {} 則會(huì)啟用 rollup 的監(jiān)聽(tīng)器
  },
  preview: {
    port: 5000, // 指定開(kāi)發(fā)服務(wù)器端口
    strictPort: true, // 若端口已被占用則會(huì)直接退出
    https: false, // 啟用 TLS + HTTP/2
    open: true, // 啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開(kāi)應(yīng)用程序
    proxy: { // 配置自定義代理規(guī)則
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true, // 配置 CORS
  },
  optimizeDeps: {
    entries: [], // 指定自定義條目——該值需要遵循 fast-glob 模式
    exclude: [], // 在預(yù)構(gòu)建中強(qiáng)制排除的依賴項(xiàng)
    include: [], // 可強(qiáng)制預(yù)構(gòu)建鏈接的包
    keepNames: false, // true 可以在函數(shù)和類上保留 name 屬性
  },
  ssr: {
    external: [], // 列出的是要為 SSR 強(qiáng)制外部化的依賴,
    noExternal: '', // 列出的是防止被 SSR 外部化依賴項(xiàng)
    target: 'node', // SSR 服務(wù)器的構(gòu)建目標(biāo)
  }
}