一文徹底搞懂Vite配置文件vite.config.js
一、vite.config.js 是什么？
在使用 Vite 進(jìn)行前端開發(fā)時，我們通常會在項目根目錄下看到一個 vite.config.js 文件（也可以是 vite.config.ts）。
這個文件的作用類似于 webpack 的 webpack.config.js，用于對 Vite 的行為進(jìn)行個性化配置，比如：
修改開發(fā)服務(wù)器端口
設(shè)置路徑別名
配置代理
引入插件
打包優(yōu)化
Vite 默認(rèn)情況下已經(jīng)足夠開箱即用，但在真實的項目開發(fā)中，我們通常需要通過配置文件來適配不同的業(yè)務(wù)需求。
二、vite.config.js 的基本結(jié)構(gòu)
vite.config.js 本質(zhì)上就是一個 配置對象，它通過 defineConfig 方法導(dǎo)出，寫法如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
open: true
},
resolve: {
alias: {
'@': '/src'
}
}
})
解釋：
plugins：用于注冊插件，比如@vitejs/plugin-vue、@vitejs/plugin-react等。server：配置開發(fā)服務(wù)器，比如端口號、代理等。resolve.alias：配置路徑別名，方便模塊引入。
三、常見配置項詳解
1. 基礎(chǔ)配置
export default defineConfig({
base: './', // 部署應(yīng)用的基礎(chǔ)路徑，默認(rèn)是 '/'
root: './', // 項目根目錄，默認(rèn)就是當(dāng)前目錄
})
base：影響打包后的資源路徑。如果你要把項目部署到子目錄，需要設(shè)置為
/子目錄/。root：指定項目根目錄，默認(rèn)是當(dāng)前執(zhí)行命令的目錄。
2. 開發(fā)服務(wù)器 server
server: {
host: '0.0.0.0', // 允許局域網(wǎng)訪問
port: 5173, // 默認(rèn)端口
open: true, // 是否自動打開瀏覽器
proxy: { // 配置反向代理
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
host：設(shè)置為
'0.0.0.0'可以讓其他設(shè)備訪問本地服務(wù)。proxy：解決跨域問題，常用于本地開發(fā)時轉(zhuǎn)發(fā)請求到后端。
3. 路徑別名 resolve
resolve: {
alias: {
'@': '/src',
'components': '/src/components'
}
}
這樣我們在引入文件時可以簡化路徑：
import Header from '@/components/Header.vue'
4. 插件 plugins
Vite 的強大之處在于它的插件系統(tǒng)。
比如 Vue 項目通常需要：
import vue from '@vitejs/plugin-vue' plugins: [vue()]
React 項目則需要：
import react from '@vitejs/plugin-react' plugins: [react()]
5. 構(gòu)建配置 build
build: {
outDir: 'dist', // 打包目錄
sourcemap: false, // 是否生成 source map
minify: 'esbuild', // 壓縮方式（esbuild 或 terser）
rollupOptions: {
output: {
manualChunks: {
vue: ['vue'], // 單獨打包 vue 相關(guān)依賴
}
}
}
}
outDir：打包后的文件輸出目錄。
rollupOptions：可以自定義 Rollup 打包行為，比如分包策略。
6. 環(huán)境變量與模式
Vite 默認(rèn)支持 .env 文件，我們可以在配置文件中根據(jù)環(huán)境區(qū)分邏輯：
export default defineConfig(({ mode }) => {
console.log('當(dāng)前模式:', mode) // development / production
return {
base: mode === 'production' ? '/prod/' : '/'
}
})
四、完整示例
下面給一個常用的 vite.config.js 配置示例：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ mode }) => {
return {
base: mode === 'production' ? '/my-app/' : '/',
plugins: [vue()],
server: {
host: '0.0.0.0',
port: 3000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
},
resolve: {
alias: {
'@': '/src'
}
},
build: {
outDir: 'dist',
sourcemap: false,
rollupOptions: {
output: {
manualChunks: {
vue: ['vue']
}
}
}
}
}
})
五、總結(jié)
vite.config.js 是 Vite 的核心配置文件，幾乎所有定制化需求都在這里實現(xiàn)。
常用的配置包括：
server（開發(fā)服務(wù)器）、resolve.alias（路徑別名）、plugins（插件）、build（構(gòu)建優(yōu)化）。可以根據(jù)不同環(huán)境（開發(fā)/生產(chǎn)）動態(tài)返回不同配置。
如果你之前是用 webpack 的，可能會覺得 Vite 的配置簡潔得多，這也是 Vite 能夠快速流行的原因之一。
到此這篇關(guān)于Vite配置文件vite.config.js的文章就介紹到這了,更多相關(guān)Vite配置文件vite.config.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue報錯Component?name"Home"should?always?be?mult
這篇文章主要介紹了Vue報錯Component?name"Home"should?always?be?multi問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
MPEGTS.js是一個輕量級的JavaScript庫,用于處理MPEG-TS流,這篇文章主要給大家介紹了關(guān)于vue使用mpegts.js的詳細(xì)步驟記錄,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue Element前端應(yīng)用開發(fā)之組織機構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容，介紹組織機構(gòu)和角色管理模塊的處理，使得我們了解界面組件化模塊的開發(fā)思路和做法，提高我們界面設(shè)計的技巧，并減少代碼的復(fù)雜性，提高界面代碼的可讀性，同時也是利用組件的復(fù)用管理。2021-05-05
解決Element中el-date-picker組件不回填的情況
這篇文章主要介紹了解決Element中el-date-picker組件不回填的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
解決Vue3?echarts?v-show無法重新渲染的問題
這篇文章主要介紹了Vue3?echarts?v-show無法重新渲染的問題,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
插槽（slot）可以說在一個?Vue?項目里面處處都有它的身影，比如我們使用一些UI?組件庫的時候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，今天通過本文給大家介紹vue3插槽slot的相關(guān)知識，感興趣的朋友一起看看吧2022-08-08
當(dāng)用戶在當(dāng)前站點停留時間比較長，中途站點進(jìn)行升級更新之后，用戶如果不刷新頁面就任然停留在舊的頁面里，如何讓用戶收到一個提示，引導(dǎo)用戶進(jìn)行更新操作呢？下面給大家介紹如何站點更新如何在生產(chǎn)環(huán)境提示用戶更新，進(jìn)行頁面刷新操作，核心原理其實很簡單2023-03-03
5個可以加速開發(fā)的VueUse函數(shù)庫(小結(jié))
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實用程序函數(shù)。具有一定的參考價值，感興趣的可以了解一下2021-11-11
本文介紹了五種刷新Vue當(dāng)前組件的方法：使用location.reload()、路由刷新、v-if或key屬性、beforeRouteUpdate導(dǎo)航守衛(wèi)以及$forceUpdate,每種方法都有其適用場景和優(yōu)缺點,需要的朋友可以參考下2025-02-02
在 Vue 3 中,覆蓋組件樣式的方法與 Vue 2 相似,但由于 Vue 3 更多地依賴于 CSS 的模塊化,一些最佳實踐可能會有所不同,下面就跟隨小編一起來了解一下吧2024-04-04