npm run build

  "dev": "vite --open",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview --open"

import.meta.env.MODE: {string} 應用運行的模式。
import.meta.env.BASE_URL: {string} 部署應用時的基本 URL。他由base 配置項決定。
import.meta.env.PROD: {boolean} 應用是否運行在生產環(huán)境。
import.meta.env.DEV: {boolean} 應用是否運行在開發(fā)環(huán)境 (永遠與 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 應用是否運行在 server 上。

.env  # 所有情況下都會加載
.env.local          # 所有情況下都會加載，但會被 git 忽略
.env.[mode]         # 只在指定模式下加載,如.env.production的優(yōu)先級比.env高
.env.[mode].local   # 只在指定模式下加載，但會被 git 忽略

<reference types="vite/client" />
 interface ImportMetaEnv {
 readonly VITE_APP_TITLE: string
              // 更多環(huán)境變量...
 }
  interface ImportMeta {
  readonly env: ImportMetaEnv
  }

 vite build --mode staging
.env.staging文件存放相關模式下的環(huán)境變量

tsconfig.json
        {
       "compilerOptions": {
       "isolatedModules":true 上述特性會在編輯時報錯，否則會在運行時報錯
            }
 }

.import.meta.env 上 Vite 注入的環(huán)境變量的類型定義
.import.meta.hot 上的 HMR API 類型定義

<reference types="vite/client" />

{
    "compilerOptions": {
    "types": ["vite/client"]
              }
}

    ├── package.json
    ├── vite.config.js
    ├── index.html
    ├── main.js
    └── nested
        ├── index.html
        └── nested.js
        
      build: {
        rollupOptions: {
          input: {
            main: resolve(__dirname, 'index.html'),
            nested: resolve(__dirname, 'nested/index.html')
          }
        }
      }

export default defineConfig(async ({ command, mode }) => {
          const config=await fn();    支持使用Promise
          if (command === 'serve') {
            return { 
            }
          } else if(command='build'){
            return {
            }
          }
})

export default defineConfig({
 
  base: "./", //開發(fā)或生產環(huán)境服務的公共基礎路徑, 絕對 URL 路徑名，例如 /foo/
  // 完整的 URL，例如 https://foo.com/
  // 空字符串或 ./（用于開發(fā)環(huán)境）
  // 通過命令指定：vite build --base=/my/public/path/
  // 代碼中獲取base：import.meta.env.BASE_URL全局變量在代碼中使用，
  //原樣出現(例如import.meta.env['BASE_URL']是無效的)
  root: process.cwd(), // 項目根目錄（index.html 文件所在的位置絕對位置或相對位置）,默認process.cwd()
  define: {
    __DEV__: 'dev',
  }, //定義全局常量替換方式。其中每項在開發(fā)環(huán)境下會被定義在全局，而在構建時被靜態(tài)替換
 
  mode: 'development', // 模式將會把serve和build時的模式都覆蓋掉。
  //也可以通過命令行 --mode 選項來重寫'development'（serve）、'production'（build）
  plugins: [vue()], // 需要用到的插件數組
  publicDir: 'public', // 靜態(tài)資源服務的文件夾。該目錄中的文件在開發(fā)期間在 / 處提供
  //并在構建期間復制到 outDir 的根目錄，并且始終按原樣提供或復制而無需進行轉換。
  //該值可以是文件系統(tǒng)的絕對路徑，也可以是相對于項目的根目錄的相對路徑。默認'public'
  cacheDir: 'node_modules/.vite', // 存儲緩存文件的目錄。此目錄下會存儲預打包的依賴項或 vite 
  // 生成的某些緩存文件，使用緩存可以提高性能。如需重新生成緩存文件，你可以使用 --force 命令行選項
  // 或手動刪除目錄。此選項的值可以是文件的絕對路徑，也可以是以項目根目錄為基準的相對路徑。
  // 當沒有檢測到 package.json 時，則默認為 .vite。  默認"node_modules/.vite"
 
  // 解析相關
  resolve: {
    alias: [ // 文件系統(tǒng)路徑別名
      {
        "@": path.resolve(__dirname, "src"),
      },
      //或
      {
        find: /\/@\//, //字符串｜正則
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 強制 Vite 始終將列出的依賴項解析為同一副本，比如當安裝了兩個不同版本的依賴，
    // 如vue2和vue3，通過這個聲明最終引入的版本  []
    conditions: [], // 解決程序包中 情景導出 時的其他允許條件 [{
    //     "exports": {
    //       ".": {
    //         "import": "./index.esm.js",
    //         "require": "./index.cjs.js"
    //       }
    //     }
    //   }]
    mainFields: [], // 解析包入口點嘗試的字段列表 ，根據package.json中的字段，
    // 在不同環(huán)境中導入庫的入口文件位置
    // import引入的文件對應module中的路徑
    // require引入的文件對應main中的路徑
    // 默認：['module', 'jsnext:main', 'jsnext','main']
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], //  默認：['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']導入時想要忽略的擴展名列表 導入時想要省略的擴展名列表。不建議忽略自定義導入類型的擴展名（例如：.vue），因為它會影響 IDE 和類型支持
    preserveSymlinks: false, // 啟用此選項會使 Vite 通過原始文件路徑（即不跟隨符號鏈接的路徑）而不是真正的文件路徑（即跟隨符號鏈接后的路徑）確定文件身份
    // 默認：false
  },
 
  // css相關
  css: {
    modules: { //配置 CSS modules 的行為。選項將被傳遞給 postcss-modules。
      scopeBehaviour: 'global' | 'local',
      // ...
    },
    postcss: '', // 內聯的 PostCSS 配置 如果提供了該內聯配置，Vite 將不會搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的預處理器選項
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },
 
  // JSON相關
  json: {
    namedExports: true, // 是否支持從.json文件中進行按名導入
    stringify: false, //  開啟此項，導入的 JSON 會被轉換為 export default JSON.parse("...") 會禁用按名導入
  },
 
  //esbuild相關
  esbuild: { // 最常見的用例是自定義 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
    // ESbuild會被應用在 ts、jsx、tsx 文件，以下選項對要處理的文件類型進行配置
    // include：string | RegExp | (string | RegExp)[]
    // exclude：string | RegExp | (string | RegExp)[]
    // jsxInject:自動為每一個被 ESbuild 轉換的文件注入內容
    //     `import React from 'react'` 
  },
 
  assetsInclude: ['**/*.gltf'], // 指定額外的 picomatch 模式 作為靜態(tài)資源處理
  logLevel: 'info', // 調整控制臺輸出的級別 'info' | 'warn' | 'error' | 'silent'
  clearScreen: true, // 設為 false 可以避免 Vite 清屏而錯過在終端中打印某些關鍵信息
  envDir: '/', // 用于加載 .env 文件的目錄
  envPrefix: [], // 以 envPrefix 開頭的環(huán)境變量會通過 import.meta.env 暴露在你的客戶端源碼中
 
  //server相關
  server: {
    host: '127.0.0.1', // 指定服務器應該監(jiān)聽哪個 IP 地址
    port: 5000, // 指定開發(fā)服務器端口
    strictPort: true, // 若端口已被占用則會直接退出
    https: false, // 啟用 TLS + HTTP/2
    // 當為true：啟用 TLS + HTTP/2。注意：當 server.proxy 選項 也被使用時，將會僅使用 TLS。
    // 這個值也可以是一個傳遞給 https.createServer() 的 選項對象
    open: true, // 啟動時自動在瀏覽器中打開應用程序
    proxy: { // 配置自定義代理規(guī)則
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        ws: true, //WebSocket
      }
    },
    cors: true, // 配置 CORS
    force: true, // 強制使依賴預構建
    hmr: { // 禁用或配置 HMR 連接 熱更新相關
      // false禁用
      protocol: string, //協(xié)議
      host: string,
      port: number,
      path: string,
      timeout: number,
      overlay: boolean, //為 false 可以禁用開發(fā)服務器錯誤的屏蔽
      clientPort: number, //只在客戶端的情況下覆蓋端口，這允許你為 websocket 提供不同的端口，而并非在客戶端代碼中查找。如果需要在 dev-server 情況下使用 SSL 代理，這非常有用。
      server: Server, //當使用 server.middlewareMode 或 server.https 時，你需將 server.hmr.server 指定為你 HTTP(S) 的服務器，這將通過你的服務器來處理 HMR 的安全連接請求。這在使用自簽證書或想通過網絡在某端口暴露 Vite 的情況下，非常有用。
    },
    watch: { // 傳遞給 chokidar 的文件系統(tǒng)監(jiān)聽器選項 監(jiān)聽文件改變
      // 通過命令:vite build --watch
      ignored: ['!**/node_modules/your-package-name/**'] //      默認會忽略對 .git/ 和 node_modules/ 目錄的監(jiān)聽,如果需要對 node_modules/ 內的包進行監(jiān)聽，可以為 server.watch.ignored 賦值一個取反的 glob 模式
      // 其他選項：使用的是rollup的選項配置:https://rollupjs.org/guide/en/#watch-options
    },
    middlewareMode: '', // 以中間件模式創(chuàng)建 Vite 服務器 'ssr' | 'html'    在SSR中使用
    fs: {
      strict: true, // 限制為工作區(qū) root 路徑以外的文件的訪問
      allow: [], // 限制哪些文件可以通過 /@fs/ 路徑提供服務
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 開發(fā)服務器提供敏感文件的黑名單
    },
    origin: 'http://127.0.0.1:8080/', // 用于定義開發(fā)調試階段生成資產的 origin
  },
 
  //build構建相關
  build: {
    target: ['modules'], // 設置最終構建的瀏覽器兼容目標   默認：'modules'指支持原生 ES 模塊的瀏覽器。
    //  "esnext" ：即假設有原生動態(tài)導入支持，并且將會轉譯得盡可能?。?
    //  如果 build.minify 選項為 'terser'， 'esnext' 將會強制降級為 'es2019'。
    //  其他情況下將完全不會執(zhí)行轉譯。
    // 'es2015'：自定義目標也可以是一個 ES 版本
    polyfillModulePreload: true, // 是否自動注入 module preload 的 polyfill true：此 polyfill 會被自動注入到每個 index.html 入口的 proxy 模塊中
    outDir: 'dist', // 指定輸出路徑
    assetsDir: 'assets', // 指定生成靜態(tài)文件目錄
    assetsInlineLimit: '4096', // 小于此閾值的導入或引用資源將內聯為 base64 編碼
    cssCodeSplit: true, // 啟用 CSS 代碼拆分
    cssTarget: '', // 允許用戶為 CSS 的壓縮設置一個不同的瀏覽器 target 與 build.target 一致
    sourcemap: false, // 構建后是否生成 source map 文件
    rollupOptions: {}, // 自定義底層的 Rollup 打包配置
    lib: {}, // 構建為庫
    manifest: false, // 當設置為 true，構建后將會生成 manifest.json 文件
    ssrManifest: false, // 構建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的構建
    minify: 'esbuild', // 指定使用哪種混淆器
    terserOptions: {}, // 傳遞給 Terser 的更多 minify 選項
    write: true, // 啟用將構建后的文件寫入磁盤
    emptyOutDir: true, // 構建時清空該目錄
    brotliSize: true, // 啟用 brotli 壓縮大小報告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 設置為 {} 則會啟用 rollup 的監(jiān)聽器
  },
 
  // 構建預覽preview相關
  preview: {
    port: 5000, // 指定開發(fā)服務器端口
    strictPort: true, // 若端口已被占用則會直接退出
    https: false, // 啟用 TLS + HTTP/2
    open: true, // 啟動時自動在瀏覽器中打開應用程序
    proxy: { // 配置自定義代理規(guī)則
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true, // 配置 CORS
  },
  optimizeDeps: {
    entries: [], // 指定自定義條目——該值需要遵循 fast-glob 模式
    exclude: [], // 在預構建中強制排除的依賴項
    include: [], // 可強制預構建鏈接的包
    keepNames: false, // true 可以在函數和類上保留 name 屬性
  },
 
  // SSR相關
  ssr: {
    external: [], // 列出的是要為 SSR 強制外部化的依賴,
    noExternal: '', // 列出的是防止被 SSR 外部化依賴項
    target: 'node', // SSR 服務器的構建目標
  },
 
  // Worker相關
  worker: {
    format: iife, //worker bundle 的輸出類型。 默認： 'iife'   'es',
    plugins: [], //適用于 worker bundle 的 Vite 插件。 []
    rollupOptions: [], //用于構建 worker bundle 的 Rollup 配置項
  }
})