vite配置文件

開(kāi)始使用vite

搭建第一個(gè)vite項(xiàng)目

npm create vite@latest

然后按照提示操作即可！

你還可以通過(guò)附加的命令行選項(xiàng)直接指定項(xiàng)目名稱和你想要使用的模板。例如，要構(gòu)建一個(gè) Vite + Vue 項(xiàng)目，運(yùn)行:

npm create vite@latest my-vue-vite-app -- --template vue

vite配置文件

在 Vite 中，配置文件是項(xiàng)目根目錄下的 vite.config.js 文件，最基本的格式為：

export default {
  // 配置選項(xiàng)
}

如果你的 Vite 配置文件不在項(xiàng)目根目錄下，你也可以通過(guò) --config 來(lái)進(jìn)行指定：

vite --config my-config.js

Vite 提供了一個(gè)工具函數(shù) defineConfig，通過(guò)它可以方便的獲取類型提示，這對(duì)于使用 TS 編寫配置尤其有用。

所以一般 Vite 配置文件的基本格式為：

export default defineConfig({
  // 配置選項(xiàng)
})

在 Vite 中，配置大致分為這么幾類：

  1. 普通配置：設(shè)置項(xiàng)目的基本選項(xiàng)，別名、根目錄、插件....
  2. 開(kāi)發(fā)服務(wù)器配置：開(kāi)發(fā)服務(wù)器的功能，開(kāi)發(fā)服務(wù)器的端口、代理、CORS....
  3. 構(gòu)建配置：構(gòu)建生產(chǎn)版本時(shí)候的配置，輸出目錄、壓縮、CSS代碼拆分....
  4. 預(yù)覽配置：配置預(yù)覽服務(wù)器的行為，端口、主機(jī)名...
  5. 依賴優(yōu)化配置：針對(duì)依賴預(yù)打包做一些配置，比如可以新增包或者排除包
  6. SSR配置：服務(wù)器端渲染相關(guān)配置
  7. Worker配置：Web Worker相關(guān)配置

普通配置

1. root

  • 類型：string
  • 默認(rèn)值：process.cwd( ) ，默認(rèn)就是項(xiàng)目根目錄
  • 描述：index.html 所在位置，可以是絕對(duì)路徑，也可以是相對(duì)于當(dāng)前工作目錄的路徑。

例如：

my-project/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── App.vue
└── vite.config.js

這個(gè)時(shí)候就可以使用 root 來(lái)進(jìn)行配置：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'public', // 將項(xiàng)目根目錄設(shè)置為 'public' 文件夾
});

2. define

  • 類型：Record<string, any>

  • 描述：定義全局常量替換。在開(kāi)發(fā)過(guò)程中，這些條目將被定義為全局變量，被定義為全局變量后，意味著不需要通過(guò) import 來(lái)導(dǎo)入，直接使用；在構(gòu)建過(guò)程中會(huì)被靜態(tài)替換。

    export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('v1.0.0'),
    __API_URL__: 'window.__backend_api_url',
  },
})

注意：Vite 使用 esbuild 的 define 進(jìn)行替換，因此值表達(dá)式必須是包含 JSON 可序列化的 值（null、boolean、number、string、array、object）的字符串或單個(gè)標(biāo)識(shí)符。對(duì)于非字符串值，Vite 會(huì)自動(dòng)將其轉(zhuǎn)換為 JSON 字符串。

3. resolve

resolve 對(duì)應(yīng)的值是一個(gè)對(duì)象，對(duì)象里面對(duì)應(yīng)了好幾項(xiàng)配置。

alias

用于配置路徑別名，這樣可以簡(jiǎn)化模塊路徑引用。

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      // 將 '@' 指向 'src' 目錄
      '@': path.resolve(__dirname, 'src'), 
      // 將 '@components' 指向 'src/components' 目錄
      '@components': path.resolve(__dirname, 'src/components'), 
      // 將 '@utils' 指向 'src/utils' 目錄
      '@utils': path.resolve(__dirname, 'src/utils'), 
    },
  },
});

之后在代碼中就可以通過(guò)別名來(lái)指定目錄：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import HelloWorld from '@components/HelloWorld.vue'; // 使用 '@components' alias
import { helperFunction } from '@utils/helpers'; // 使用 '@utils' alias

createApp(App).mount('#app');

extensions

在導(dǎo)入時(shí)省略文件擴(kuò)展名時(shí)，嘗試的文件擴(kuò)展名列表。

注意，不推薦對(duì)自定義導(dǎo)入類型（如 .vue）省略擴(kuò)展名，因?yàn)檫@可能會(huì)干擾 IDE 和類型支持。

默認(rèn)值為 ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

可以自定義擴(kuò)展名的順序，比如優(yōu)先匹配 ts 類型：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], // 自定義擴(kuò)展名順序
  },
});

4. CSS

CSS 配置項(xiàng)對(duì)應(yīng)的值同樣是一個(gè)對(duì)象，一個(gè)基本的格式如下：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    // 其他配置項(xiàng)
  }
});

下面是一個(gè)常見(jiàn)的配置項(xiàng)：

postcss：該配置項(xiàng)用于配置 PostCSS 的行為，可以是內(nèi)聯(lián)的 PostCSS 配置，也可以是自定義目錄。

內(nèi)聯(lián) PostCSS 配置：

// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

export default defineConfig({
  css: {
    postcss: {
      // 在這里配置 postcss 相關(guān)信息，例如用哪個(gè)插件....
      plugins: [
        autoprefixer(),
        cssnano()
      ]
    }
  }
});

自定義目錄：

my-project/
├── config/
│   └── postcss.config.js
├── src/
│   └── main.js
└── vite.config.js

這個(gè)時(shí)候直接指定 postcss 的目錄就可以了：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: 'config' // 指定自定義目錄
  }
});

preprocessorOptions：該配置項(xiàng)用于為 CSS 預(yù)處理器指定配置，文件擴(kuò)展名用于作為鍵來(lái)設(shè)置選項(xiàng)。每個(gè)預(yù)處理器支持的選項(xiàng)可以在它們各自的文檔中找到：

  • Sass/Scss 支持的配置選項(xiàng)
  • Less 支持的配置選項(xiàng)
  • styl/stylus - 目前僅支持 define，可以作為對(duì)象傳遞。
export default defineConfig({
  css: {
    // 配置 css 預(yù)處理器
    preprocessorOptions: {
      less: {
        math: 'parens-division',
      },
      styl: {
        // 目前僅支持 define
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
        },
      },
    },
  },
})

preprocessorOptions[extension].additionalData：當(dāng)你想要為 CSS 預(yù)處理器（如 SCSS、SASS、Less 等）添加全局樣式、變量、或混合器時(shí)，該選項(xiàng)非常有用。

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 這里添加了一些全局變量，之后在任何的 Scss 文件中都可以使用這些全局變量
        additionalData: `$injectedColor: orange; $defaultMargin: 10px;`
      }
    }
  }
});

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 相當(dāng)于給所有的 Scss 文件的頭部都添加了這個(gè)引用，自動(dòng)導(dǎo)入 mixins.scss 混合器文件
        additionalData: `@import "@/styles/mixins.scss";`
      }
    }
  }
});

preprocessorMaxWorkers：如果啟用了這個(gè)選項(xiàng)，那么 CSS 預(yù)處理器會(huì)盡可能在 worker 線程中運(yùn)行?？梢栽O(shè)置 number 值，也可以設(shè)置布爾值，例如設(shè)置成 true 的話表示 CPU 數(shù)量減 1.

devSourcemap：在開(kāi)發(fā)過(guò)程中是否啟用 source maps，默認(rèn)值為 false.

export default defineConfig({
  css: {
    // 開(kāi)啟 source maps
    devSourcemap: true
  }
});

transformer：指定 CSS 處理的引擎，可以設(shè)置的值就兩個(gè)，'postcss' 或者 'lightningcss'

lightingcss 就是 postcss 的 rust 版本。

服務(wù)器配置

服務(wù)器配置是指開(kāi)發(fā)服務(wù)器，對(duì)應(yīng)的配置項(xiàng)是 server

一個(gè)基本的格式如下：

export default defineConfig({
  server: {
    // 眾多配置項(xiàng)
  },
})

下面是一個(gè)常見(jiàn)的配置項(xiàng)：

host

指定服務(wù)器應(yīng)該監(jiān)聽(tīng)哪個(gè) IP 地址，默認(rèn)是 localhost.

類型： string | boolean

默認(rèn)： 'localhost'

思考?? 正常情況下就是 localhost 就好了呀，什么情況下還存在要修改 host 的情況呢？

答案：除了 localhost 以外，我們經(jīng)常還需要設(shè)置為 0.0.0.0 或者 true，表示監(jiān)聽(tīng)所有的網(wǎng)絡(luò)接口請(qǐng)求。有些時(shí)候需要多設(shè)備來(lái)測(cè)試應(yīng)用。

port

監(jiān)聽(tīng)的端口號(hào)，默認(rèn)是 5173.

strictPort

如果設(shè)置為 true，Vite 將嚴(yán)格使用指定的端口。如果端口被占用，服務(wù)器啟動(dòng)將失敗。

proxy

這個(gè)配置項(xiàng)非常常用，用于配置代理服務(wù)器。

export default defineConfig({
  server: {
    proxy: {
      '/foo': 'http://localhost:4567', // 將 '/foo' 前綴的請(qǐng)求代理到 'http://localhost:4567'
    },
  },
});

對(duì)應(yīng)的值也可以是對(duì)象的形式，對(duì)象形式能夠包含更多的配置選項(xiàng)：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''), // 重寫路徑，將 '/api' 前綴去掉
      },
    },
  },
});

open

啟動(dòng)開(kāi)發(fā)服務(wù)器時(shí)是否自動(dòng)在瀏覽器中打開(kāi)應(yīng)用，默認(rèn)值是 false.

https

是否啟用 HTTPS。如果是一個(gè)對(duì)象，可以指定 SSL 證書和私鑰的路徑。

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt')
    }
  },
});

watch

自定義文件監(jiān)視器的選項(xiàng)。這對(duì)于開(kāi)發(fā)過(guò)程中的熱模塊替換（HMR）非常關(guān)鍵。背后其實(shí)使用的是 chokidar，一個(gè) Node.js 的文件系統(tǒng)監(jiān)聽(tīng)?zhēng)?，它提供了多種可配置的監(jiān)聽(tīng)選項(xiàng)。

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    watch: {
      // 任何位于 ignored-directory 目錄下的文件
      // 或者任何目錄下面的 some-specific-file.txt 文件
      // 內(nèi)容發(fā)生更改都不會(huì)觸發(fā) HMR
      ignored: ['**/ignored-directory/**', '**/some-specific-file.txt']
    }
  }
});

watch 還支持更加細(xì)粒度的控制：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    watch: {
      ignored: '**/temp/**', // 忽略 temp 目錄
      persistent: true,      // 持續(xù)監(jiān)聽(tīng)變化
      usePolling: true,      // 使用輪詢
      interval: 100,         // 輪詢間隔 100 毫秒
      binaryInterval: 300    // 對(duì)于二進(jìn)制文件的輪詢間隔
    }
  }
});

如果想要關(guān)閉文件監(jiān)聽(tīng)，直接設(shè)置為 null 即可：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    watch: null
  }
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容