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