前端必看：Vite.config.js 最全配置指南 + 实战案例

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 的关键配置文件，它：

0. 保持了原有的微前端架构：通过动态别名配置支持子模块加载
1. 提升了开发体验：利用 Vite 的快速启动和热重载特性
2. 优化了构建性能：现代化的构建工具链
3. 保持了功能完整性：国际化、路由、代理等核心功能全部保留

这个配置文件体现了 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);