1. 文件概述
vite.config.js 是 moyu 项目的 Vite 构建配置文件，用于配置开发服务器、构建选项、插件系统等。该文件支持现代前端开发的快速热重载和高效构建。
2. 核心配置解析
2.1 插件系统 (Plugins)
jslet pluginAry = [
vue({ /* Vue 2 支持 */ }),
vueJsx({}), // JSX 语法支持
transformPlugin(), // 自定义转换插件
htmlPlugin(), // HTML 处理插件
eslintPlugin({ /* ESLint 集成 */ }),
createI18nPlugin(), // 国际化插件
legacyPlugin({ /* 兼容旧浏览器 */ }),
ViteCodeInspectorPlugin({ /* 代码检查工具 */ }),
viteExternalsPlugin({ /* 外部依赖配置 */ })
];
关键插件说明：
| 插件 | 功能 |
|---|---|
@vitejs/plugin-vue2 | 支持 Vue 2 项目 |
@vitejs/plugin-vue2-jsx | 支持 Vue JSX 语法 |
transformPlugin() | 自定义代码转换（位于 ./build/vite/transform.plugin.js） |
htmlPlugin() | HTML 模板处理 |
eslintPlugin | 开发时 ESLint 检查 |
legacyPlugin | 生成兼容旧浏览器的代码 |
viteExternalsPlugin | 将指定依赖作为外部库，不打包进 bundle |
2.2 模块别名配置 (Alias)
jsfunction 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 配置中的别名功能完全一致，确保模块导入的一致性。
2.3 开发服务器配置 (Server)
jsserver: {
port: 3001,
host: getNetworkIp(), // 自动获取局域网 IP
open: true, // 启动时自动打开浏览器
cors: true, // 启用跨域
proxy: {
'/socket.io': { /* WebSocket 代理 */ },
'/api': { /* API 代理，移除 /api 前缀 */ }
},
hmr: { overlay: true } // 热更新错误覆盖层
}
代理配置说明：
/socket.io: 转发到后端 WebSocket 服务/api: 转发到后端 API 服务，并自动移除/api前缀
2.4 外部依赖配置 (Externals)
jsviteExternalsPlugin({
"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 环境变量定义 (Define)
jslet define = {
'process.env.NODE_ENV': '"development"',
'process.env.VITE_ENV': true,
'process.env.FORCE_DEPEND': false,
'process.env.BASE_API': {}
}
这些变量在代码中可以通过 process.env.XXX 访问，用于条件编译和环境判断。
3. 与微前端架构的集成
3.1 模块动态加载
Vite 配置通过 getModuleAlias() 动态生成子模块别名，与 childModule.json 配置文件联动：
js// childModule.json
{
"moyu-systemset-page": { "open": true, "desc": "系统设置" },
"moyu-assetmanage-page": { "open": true, "desc": "资产管理中心" }
}
// 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 国际化支持
jsconst i18nConfig = require('./build/service/developI18nConfig.js');
i18nConfig.createFile('zh');
i18nConfig.createFile('en');
// 插件集成
createI18nPlugin()
启动时自动生成中英文语言包文件，支持运行时切换。
3.3 路由和生成器插件
jspluginAry.unshift(routerPlugin.plugin());
pluginAry.unshift(generatorPlugin.plugin());
pluginAry.unshift(wormholePlugin());
routerPlugin: 路由相关功能generatorPlugin: 代码生成器wormholePlugin: 可能是内部通信或数据隧道插件
4. 构建优化配置
4.1 依赖预构建
jslet optimizeDeps = {
include: Object.keys(pkg.dependencies), // 预构建所有依赖
exclude: ["canvas"] // 排除 canvas
}
4.2 生产构建配置
jsbuild: {
target: 'es2015', // 目标 JavaScript 版本
minify: 'terser', // 使用 terser 压缩
manifest: false, // 不生成 manifest
sourcemap: false, // 不生成 source map
outDir: 'dist' // 输出目录
}
4.3 CSS 预处理器
jscss: {
preprocessorOptions: {
less: {
javascriptEnabled: true, // 支持 Less 中的 JavaScript
}
}
}
5. 与 Webpack 配置的对比
| 功能 | Webpack 配置 | Vite 配置 |
|---|---|---|
| 模块别名 | resolve.alias | resolve.alias |
| 开发服务器 | devServer | server |
| 代理配置 | devServer.proxy | server.proxy |
| 插件系统 | plugins 数组 | plugins 数组 |
| 外部依赖 | externals | viteExternalsPlugin |
| 环境变量 | DefinePlugin | define |
6. 完整工作流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 1. 启动 Vite 开发服务器 (npm run dev) │
└─────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────┐
│ 2. 执行 vite.config.js │
│ - 读取 childModule.json │
│ - 生成模块别名 │
│ - 创建国际化文件 │
│ - 配置插件和服务器 │
└─────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────┐
│ 3. 启动开发服务器 │
│ - 监听 3001 端口 │
│ - 自动打开浏览器 │
│ - 配置 API 代理 │
└─────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────┐
│ 4. 模块导入解析 │
│ import 'moyu-systemset-page' │
│ → 解析为 ./modules/moyu-systemset-page/src/index.js │
│ → 执行 pushComponent() 注册模块 │
└─────────────────────────────────────────────────────────────────────────┘
7. 关键优势
| 特性 | 说明 |
|---|---|
| 快速启动 | Vite 基于原生 ES 模块，无需打包即可运行 |
| 热重载 | 修改代码即时更新，开发体验极佳 |
| 现代化 | 支持最新前端技术栈和标准 |
| 兼容性 | 通过 legacy 插件支持旧浏览器 |
| 微前端友好 | 完美支持 moyu 的模块化架构 |
| 开发效率 | 内置 ESLint、代码检查等开发工具 |
8. 总结
vite.config.js 是 moyu 项目从 Webpack 迁移到 Vite 的关键配置文件，它：
- 保持了原有的微前端架构：通过动态别名配置支持子模块加载
- 提升了开发体验：利用 Vite 的快速启动和热重载特性
- 优化了构建性能：现代化的构建工具链
- 保持了功能完整性：国际化、路由、代理等核心功能全部保留
这个配置文件体现了 moyu 项目在保持架构稳定性的同时，积极拥抱现代前端工程化工具的演进策略。
二 全局注册组件**
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);
