Vite.config.js最全配置指南及實戰(zhàn)案例(前端必看)
更新時間：2026年07月04日 16:12:02 作者：墨魚筆記
vite.config.js是Vite項目的核心配置文件,借助它能夠?qū)?Vite?構(gòu)建工具的各項行為進行定制,這篇文章主要介紹了Vite.config.js最全配置指南及實戰(zhàn)案例的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
1. 文件概述
vite.config.js 是 moyu 項目的 Vite 構(gòu)建配置文件，用于配置開發(fā)服務(wù)器、構(gòu)建選項、插件系統(tǒng)等。該文件支持現(xiàn)代前端開發(fā)的快速熱重載和高效構(gòu)建。
2. 核心配置解析
2.1 插件系統(tǒng) (Plugins)
let pluginAry = [
vue({ /* Vue 2 支持 */ }),
vueJsx({}), // JSX 語法支持
transformPlugin(), // 自定義轉(zhuǎn)換插件
htmlPlugin(), // HTML 處理插件
eslintPlugin({ /* ESLint 集成 */ }),
createI18nPlugin(), // 國際化插件
legacyPlugin({ /* 兼容舊瀏覽器 */ }),
ViteCodeInspectorPlugin({ /* 代碼檢查工具 */ }),
viteExternalsPlugin({ /* 外部依賴配置 */ })
];
關(guān)鍵插件說明：
| 插件 | 功能 |
|---|---|
@vitejs/plugin-vue2 | 支持 Vue 2 項目 |
@vitejs/plugin-vue2-jsx | 支持 Vue JSX 語法 |
transformPlugin() | 自定義代碼轉(zhuǎn)換（位于 ./build/vite/transform.plugin.js） |
htmlPlugin() | HTML 模板處理 |
eslintPlugin | 開發(fā)時 ESLint 檢查 |
legacyPlugin | 生成兼容舊瀏覽器的代碼 |
viteExternalsPlugin | 將指定依賴作為外部庫，不打包進 bundle |
2.2 模塊別名配置 (Alias)
function getModuleAlias() {
Object.keys(allModules).forEach(moduleName => {
alias[moduleName] = path.resolve(__dirname, `./modules/${moduleName}/src/index.js`)
});
}
getModuleAlias();
別名映射表：
'@'→./src'@modules'→./modules'moyu-systemset-page'→./modules/moyu-systemset-page/src/index.js'moyu-assetmanage-page'→./modules/moyu-assetmanage-page/src/index.js- ...（其他子模塊）
這與 Webpack 配置中的別名功能完全一致，確保模塊導(dǎo)入的一致性。
2.3 開發(fā)服務(wù)器配置 (Server)
server: {
port: 3001,
host: getNetworkIp(), // 自動獲取局域網(wǎng) IP
open: true, // 啟動時自動打開瀏覽器
cors: true, // 啟用跨域
proxy: {
'/socket.io': { /* WebSocket 代理 */ },
'/api': { /* API 代理，移除 /api 前綴 */ }
},
hmr: { overlay: true } // 熱更新錯誤覆蓋層
}
代理配置說明：
/socket.io: 轉(zhuǎn)發(fā)到后端 WebSocket 服務(wù)/api: 轉(zhuǎn)發(fā)到后端 API 服務(wù)，并自動移除/api前綴
2.4 外部依賴配置 (Externals)
viteExternalsPlugin({
"echarts": "echarts",
"vue": "Vue",
"vuex": "Vuex",
"SunflowerConfig": "SunflowerConfig",
"SunflowerLangZH": 'SunflowerLangZH',
"SunflowerLangEN": 'SunflowerLangEN',
"three": "THREE",
"moment": "moment",
"moment-timezone": "moment-timezone",
})
作用：
- 這些庫不會被打包進最終的 bundle
- 運行時從全局變量或 CDN 加載
- 減少 bundle 體積，提升加載速度
2.5 環(huán)境變量定義 (Define)
let define = {
'process.env.NODE_ENV': '"development"',
'process.env.VITE_ENV': true,
'process.env.FORCE_DEPEND': false,
'process.env.BASE_API': {}
}
這些變量在代碼中可以通過 process.env.XXX 訪問，用于條件編譯和環(huán)境判斷。
3. 與微前端架構(gòu)的集成
3.1 模塊動態(tài)加載
Vite 配置通過 getModuleAlias() 動態(tài)生成子模塊別名，與 childModule.json 配置文件聯(lián)動：
js// childModule.json
{
"moyu-systemset-page": { "open": true, "desc": "系統(tǒng)設(shè)置" },
"moyu-assetmanage-page": { "open": true, "desc": "資產(chǎn)管理中心" }
}
?
// vite.config.js 自動生成
alias['moyu-systemset-page'] = './modules/moyu-systemset-page/src/index.js'
alias['moyu-assetmanage-page'] = './modules/moyu-assetmanage-page/src/index.js'
3.2 國際化支持
const i18nConfig = require('./build/service/developI18nConfig.js');
i18nConfig.createFile('zh');
i18nConfig.createFile('en');
?
// 插件集成
createI18nPlugin()
啟動時自動生成中英文語言包文件，支持運行時切換。
3.3 路由和生成器插件
pluginAry.unshift(routerPlugin.plugin()); pluginAry.unshift(generatorPlugin.plugin()); pluginAry.unshift(wormholePlugin());
routerPlugin: 路由相關(guān)功能generatorPlugin: 代碼生成器wormholePlugin: 可能是內(nèi)部通信或數(shù)據(jù)隧道插件
4. 構(gòu)建優(yōu)化配置
4.1 依賴預(yù)構(gòu)建
let optimizeDeps = {
include: Object.keys(pkg.dependencies), // 預(yù)構(gòu)建所有依賴
exclude: ["canvas"] // 排除 canvas
}
4.2 生產(chǎn)構(gòu)建配置
build: {
target: 'es2015', // 目標(biāo) JavaScript 版本
minify: 'terser', // 使用 terser 壓縮
manifest: false, // 不生成 manifest
sourcemap: false, // 不生成 source map
outDir: 'dist' // 輸出目錄
}
4.3 CSS 預(yù)處理器
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true, // 支持 Less 中的 JavaScript
}
}
}
5. 與 Webpack 配置的對比
| 功能 | Webpack 配置 | Vite 配置 |
|---|---|---|
| 模塊別名 | resolve.alias | resolve.alias |
| 開發(fā)服務(wù)器 | devServer | server |
| 代理配置 | devServer.proxy | server.proxy |
| 插件系統(tǒng) | plugins 數(shù)組 | plugins 數(shù)組 |
| 外部依賴 | externals | viteExternalsPlugin |
| 環(huán)境變量 | DefinePlugin | define |
6. 完整工作流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 1. 啟動 Vite 開發(fā)服務(wù)器 (npm run dev) │
└─────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────┐
│ 2. 執(zhí)行 vite.config.js │
│ - 讀取 childModule.json │
│ - 生成模塊別名 │
│ - 創(chuàng)建國際化文件 │
│ - 配置插件和服務(wù)器 │
└─────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────┐
│ 3. 啟動開發(fā)服務(wù)器 │
│ - 監(jiān)聽 3001 端口 │
│ - 自動打開瀏覽器 │
│ - 配置 API 代理 │
└─────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────┐
│ 4. 模塊導(dǎo)入解析 │
│ import 'moyu-systemset-page' │
│ → 解析為 ./modules/moyu-systemset-page/src/index.js │
│ → 執(zhí)行 pushComponent() 注冊模塊 │
└─────────────────────────────────────────────────────────────────────────┘
7. 關(guān)鍵優(yōu)勢
| 特性 | 說明 |
|---|---|
| 快速啟動 | Vite 基于原生 ES 模塊，無需打包即可運行 |
| 熱重載 | 修改代碼即時更新，開發(fā)體驗極佳 |
| 現(xiàn)代化 | 支持最新前端技術(shù)棧和標(biāo)準(zhǔn) |
| 兼容性 | 通過 legacy 插件支持舊瀏覽器 |
| 微前端友好 | 完美支持 moyu 的模塊化架構(gòu) |
| 開發(fā)效率 | 內(nèi)置 ESLint、代碼檢查等開發(fā)工具 |
8. 總結(jié)
vite.config.js 是 moyu 項目從 Webpack 遷移到 Vite 的關(guān)鍵配置文件，它：
- 保持了原有的微前端架構(gòu)：通過動態(tài)別名配置支持子模塊加載
- 提升了開發(fā)體驗：利用 Vite 的快速啟動和熱重載特性
- 優(yōu)化了構(gòu)建性能：現(xiàn)代化的構(gòu)建工具鏈
- 保持了功能完整性：國際化、路由、代理等核心功能全部保留
這個配置文件體現(xiàn)了 moyu 項目在保持架構(gòu)穩(wěn)定性的同時，積極擁抱現(xiàn)代前端工程化工具的演進策略。
二 全局注冊組件**
components/index.js文件
?
const globalComponents = {
routerTabView: () => import('./router-tab-view/RouterTabView.vue'), // 路由tab菜單組件
pageFootWrap: () => import('./page-foot-wrap/pageFootWrap.vue'), // 頁面底部固定組件樣式組件
}
?
function install(Vue) {
Object.keys(globalComponents).forEach((componentName) => {
Vue.component(componentName, globalComponents[componentName]);
});
}
export default {
install
}
?
?
main.js 文件
import GlobalComponents from './components/index.js';
GlobalComponents.install(Vue);
到此這篇關(guān)于Vite.config.js最全配置指南及實戰(zhàn)案例的文章就介紹到這了,更多相關(guān)Vite.config.js最全配置指南內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios
這篇文章主要介紹了vue中調(diào)接口的方式：this.$api、直接調(diào)用、axios,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-11-11
關(guān)于keep-alive路由多級嵌套不生效的解決方案
本文主要介紹了關(guān)于keep-alive路由多級嵌套不生效的解決方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于vue3父組件調(diào)用子組件的方法例子,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
Vue實例中生命周期created和mounted的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Vue實例中生命周期created和mounted區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要介紹了解讀vant的Uploader上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue基于環(huán)境變量統(tǒng)一的多級路徑部署終極指南
這篇文章主要為大家詳細(xì)介紹了一個完整的解決方案,從環(huán)境變量配置到Nginx部署,確保你的Vue項目可以靈活部署在任何路徑下,下面小編就為大家簡單介紹一下吧2025-08-08
el-table實現(xiàn)給每行添加loading效果案例
這篇文章主要介紹了el-table實現(xiàn)給每行添加loading效果案例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue+element tabs選項卡分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能實例
最近做項目有用到某個div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue?router?動態(tài)路由清除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05