Vite 配置篇：日常開發掌握這些配置就夠了！_前端阿飛

theme: scrolls-light highlight: atom-one-light

本文為稀土掘金技術社區首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！

不知道有沒有這樣的兄弟，學習 Vite 的時候，官網上各種配置看的是眼花繚亂。不知道哪些需要掌握，哪些只用簡單瞭解一下。為了提高大家的效率，我把項目中常用的配置梳理了一下分享給大家，希望對你上手 Vite 有所幫助。話不多説，開幹！

css.preprocessorOptions

傳遞給 CSS 預處理器的配置選項，這些配置會傳遞到預處理器的執行參數中去。例如，在 scss 中定義一個全局變量：

```js // vite.config.js import { defineConfig } from 'vite' // 使用 defineConfig 工具函數獲取類型提示：

export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: $injectedColor: orange; // 全局變量 } } } }) ``` 我們也可以定義一個全局變量文件，然後再引入這個文件：

scss // src/assets/styles/variables.scss $injectedColor: orange; $injectedFontSize: 16px; ```js // vite.config.js import { defineConfig } from 'vite'

export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: @import '/src/assets/styles/variables.scss'; // 引入全局變量文件 } } } }) `` 這樣在.scss文件或.vue` 文件中就可以使用這些變量了。

css.postcss

PostCSS 也是用來處理 CSS 的，只不過它更像是一個工具箱，可以添加各種插件來處理 CSS 。像瀏覽器樣式兼容問題、瀏覽器適配等，都可以通過 PostCSS 來解決。

Vite 對 PostCSS 有良好的支持，我們只需要安裝相應的插件就可以了。如移動端使用 postcss-px-to-viewport 對不同設備進行佈局適配：

js npm install postcss-px-to-viewport -D

```js // vite.config.js import { defineConfig } from 'vite' import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig({ css: { postcss: { plugins: [ // viewport 佈局適配 postcssPxToViewport({ viewportWidth: 375 }) ] } } }) ``` 這樣我們書寫的 px 單位就會轉為 vw 或 vh ，很輕鬆地解決了適配問題。

resolve.alias

定義路徑別名也是我們常用的一個功能，我們通常會給 scr 定義一個路徑別名：

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

export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') // 路徑別名 } } }) `` 我們也可以使用插件，來自動給src和src` 下所有的文件夾定義路徑別名：

```js // vite.config.js import { defineConfig } from 'vite' import { ViteAliases } from './node_modules/vite-aliases' // 通過名稱引入會報錯，可能是插件問題

export default defineConfig({ plugins: [ ViteAliases() ] }) 相應的路徑別名如下： src -> @ assets -> @assets components -> @components router -> @router stores -> @stores views -> @views ... ```

resolve.extensions

導入時想要省略的擴展名列表。默認值為 ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] 。

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

export default defineConfig({ resolve: { extensions: ['.js', '.ts', '.json'] // 導入時想要省略的擴展名列表 } }) ```

注意：不建議忽略自定義導入類型的擴展名（例如：.vue），因為它會影響 IDE 和類型支持。

optimizeDeps.force

是否開啟強制依賴預構建。node_modules 中的依賴模塊構建過一次就會緩存在 node_modules/.vite/deps 文件夾下，下一次會直接使用緩存的文件。而有時候我們想要修改依賴模塊的代碼，做一些測試或者打個補丁，這時候就要用到強制依賴預構建。