Vue实现多站点
Vue 实现多站点的方案
Vue 实现多站点通常涉及以下几种方法，具体选择取决于项目需求和架构设计。
使用动态路由和模块化设计
通过动态路由和模块化设计，可以在同一个 Vue 项目中支持多个站点。每个站点可以视为一个独立模块，共享部分公共组件和逻辑。
// 动态路由配置示例
const routes = [
{
path: '/site1',
component: () => import('./sites/Site1.vue'),
meta: { site: 'site1' }
},
{
path: '/site2',
component: () => import('./sites/Site2.vue'),
meta: { site: 'site2' }
}
];环境变量和构建配置
通过环境变量区分不同站点的配置，结合构建工具（如 Vite 或 Webpack）生成不同的输出。
// .env.site1
VUE_APP_SITE=site1
VUE_APP_API_BASE=https://api.site1.com
// .env.site2
VUE_APP_SITE=site2
VUE_APP_API_BASE=https://api.site2.com在构建时指定环境文件：
vite build --mode site1
vite build --mode site2微前端架构
使用微前端框架（如 qiankun 或 Module Federation）将多个 Vue 应用集成到一个主应用中。每个站点作为独立的子应用运行，共享或隔离依赖。
// 主应用配置
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'site1',
entry: '//site1.example.com',
container: '#site1-container',
activeRule: '/site1'
},
{
name: 'site2',
entry: '//site2.example.com',
container: '#site2-container',
activeRule: '/site2'
}
]);
start();多仓库与共享代码库
为每个站点维护独立的代码仓库，同时通过 monorepo 或 npm 包共享公共代码。适合站点差异较大且需要独立部署的场景。
// 项目结构
projects/
site1/ # 站点1独立项目
site2/ # 站点2独立项目
common/ # 共享代码动态主题和配置加载
通过后端 API 动态加载站点配置和主题，实现同一套代码适配不同站点。适合需要频繁变更的场景。
// 动态加载配置示例
async function loadSiteConfig(siteId) {
const response = await fetch(`/api/sites/${siteId}/config`);
return response.json();
}选择建议
- 若站点间差异较小，优先使用动态路由或环境变量。
- 若需完全隔离，考虑微前端或多仓库方案。
- 动态配置适合需要灵活切换的场景。
