Vite 構建生產(chǎn)版本

當需要將應用部署到生產(chǎn)環(huán)境時，只需運行 vite build 命令。默認情況下，它使用<root>/index.html 作為其構建入口點，并生成能夠靜態(tài)部署的應用程序包。

瀏覽器兼容性

用于生產(chǎn)環(huán)境的構建包會假設目標瀏覽器支持現(xiàn)代 JavaScript 語法。默認情況下，Vite 的目標瀏覽器是指能夠 支持原生 ESM script 標簽 和 支持原生 ESM 動態(tài)導入 的。作為參考，Vite 使用這個 browserslist 作為查詢標準：

defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0

你也可以通過 ?build.target? 配置項 指定構建目標，最低支持 ?es2015?。

請注意，默認情況下 Vite 只處理語法轉譯，且 默認不包含任何 polyfill。你可以前往 Polyfill.io 查看，這是一個基于用戶瀏覽器 User-Agent 字符串自動生成 polyfill 包的服務。

傳統(tǒng)瀏覽器可以通過插件 @vitejs/plugin-legacy 來支持，它將自動生成傳統(tǒng)版本的 chunk 及與其相對應 ES 語言特性方面的 polyfill。兼容版的 chunk 只會在不支持原生 ESM 的瀏覽器中進行按需加載。

公共基礎路徑

如果你需要在嵌套的公共路徑下部署項目，只需指定 ?base ?配置項，然后所有資源的路徑都將據(jù)此配置重寫。這個選項也可以通過命令行參數(shù)指定，例如 ?vite build --base=/my/public/path/?。

由 JS 引入的資源 URL，CSS 中的 ?url()? 引用以及 ?.html? 文件中引用的資源在構建過程中都會自動調整，以適配此選項。

當然，情況也有例外，當訪問過程中需要使用動態(tài)連接的 url 時，可以使用全局注入的 ?import.meta.env.BASE_URL? 變量，它的值為公共基礎路徑。注意，這個變量在構建時會被靜態(tài)替換，因此，它必須按 ?import.meta.env.BASE_URL? 的原樣出現(xiàn)（例如 ?import.meta.env['BASE_URL']? 是無效的）

自定義構建

構建過程可以通過多種構建配置選項來自定義構建。具體來說，你可以通過 build.rollupOptions 直接調整底層的 Rollup 選項：

// vite.config.js
module.exports = defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    }
  }
})

例如，你可以使用僅在構建期間應用的插件來指定多個 Rollup 輸出。

文件變化時重新構建

你可以使用 vite build --watch 來啟用 rollup 的監(jiān)聽器。或者，你可以直接通過 build.watch 調整底層的 ?WatcherOptions ?選項：

// vite.config.js
module.exports = defineConfig({
  build: {
    watch: {
      // https://rollupjs.org/guide/en/#watch-options
    }
  }
})

多頁面應用模式

假設你有下面這樣的項目文件結構

├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
    ├── index.html
    └── nested.js

在開發(fā)過程中，簡單地導航或鏈接到 ?/nested/? - 將會按預期工作，與正常的靜態(tài)文件服務器表現(xiàn)一致。

在構建過程中，你只需指定多個 ?.html? 文件作為入口點即可：

// 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')
      }
    }
  }
})

如果你指定了另一個根目錄，請記住，在解析輸入路徑時，__dirname 的值將仍然是 vite.config.js 文件所在的目錄。因此，你需要把對應入口文件的 root 的路徑添加到 resolve 的參數(shù)中。

庫模式

當你開發(fā)面向瀏覽器的庫時，你可能會將大部分時間花在該庫的測試/演示頁面上。在 Vite 中你可以使用 ?index.html? 獲得如絲般順滑的開發(fā)體驗。

當這個庫要進行發(fā)布構建時，請使用 ?build.lib? 配置項，以確保將那些你不想打包進庫的依賴進行外部化處理，例如 ?vue ?或 ?react?：

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

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      // 確保外部化處理那些你不想打包進庫的依賴
      external: ['vue'],
      output: {
        // 在 UMD 構建模式下為這些外部化的依賴提供一個全局變量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

使用如上配置運行 vite build 時，將會使用一套面向庫的 Rollup 預設，并且將為該庫提供兩種構建格式：es 和 umd (可在 build.lib 中配置)：

$ vite build
building for production...
[write] my-lib.es.js 0.08kb, brotli: 0.07kb
[write] my-lib.umd.js 0.30kb, brotli: 0.16kb

推薦在你庫的 package.json 中使用如下格式：

推薦在你庫的 package.json 中使用如下格式：

{
  "name": "my-lib",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.js",
  "module": "./dist/my-lib.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  }
}