Vue实现多站点
Vue实现多站点的方案
Vue.js可以通过多种方式实现多站点架构，具体方案取决于项目需求和规模。以下是常见的几种实现方法：
基于动态路由的SPA方案
适用于中小型多站点项目，所有站点共享同一个Vue应用实例：
// router.js
const routes = [
{
path: '/site1/:page*',
component: () => import('./layouts/Site1.vue'),
meta: { site: 'site1' }
},
{
path: '/site2/:page*',
component: () => import('./layouts/Site2.vue'),
meta: { site: 'site2' }
}
]通过路由守卫处理站点切换逻辑：
router.beforeEach((to, from, next) => {
const site = to.meta.site
store.commit('SET_CURRENT_SITE', site)
next()
})微前端架构方案
适合大型复杂项目，各站点作为独立应用开发部署：
- 使用qiankun或single-spa等微前端框架
- 主应用负责导航和布局
- 子应用独立开发部署
主应用配置示例：
// main app
import { registerMicroApps } from 'qiankun'
registerMicroApps([
{
name: 'site1',
entry: '//localhost:7101',
container: '#subapp-container',
activeRule: '/site1'
}
])多仓库多构建方案
完全独立的Vue项目，共享公共组件库：
- 创建独立的Vue项目对应每个站点
- 通过npm或git submodule共享公共组件
- 使用CI/CD分别构建部署
共享组件库配置示例：
// webpack.config.js
resolve: {
alias: {
'@common': path.resolve(__dirname, '../common/src')
}
}动态主题和配置方案
通过环境变量和动态配置区分站点：
// main.js
const siteConfig = {
'site1': {
theme: 'blue',
apiBase: 'https://api.site1.com'
}
}
const currentSite = process.env.VUE_APP_SITE
Vue.prototype.$siteConfig = siteConfig[currentSite]模板中使用动态配置：
<template>
<div :class="`theme-${$siteConfig.theme}`">
<!-- site content -->
</div>
</template>服务端渲染方案
使用Nuxt.js实现多站点SSR：
- 配置nuxt.config.js动态参数
- 通过中间件识别站点
- 服务端返回对应模板
nuxt.config.js示例：
module.exports = {
buildModules: [
['@nuxtjs/router', {
path: `./router/${process.env.SITE_ID}.js`
}]
]
}部署注意事项
- CDN路径区分：
/static/site1/vs/static/site2/ - API服务隔离：不同站点使用不同API端点
- 缓存策略：为每个站点配置独立缓存键
- 分析跟踪：各站点使用独立统计ID
通过上述方案，Vue.js项目可以灵活实现多站点架构，开发者可根据具体需求选择最适合的实现方式。
