vue实现分站
Vue 实现分站的方案
在 Vue 中实现分站功能通常涉及路由配置、多环境部署和动态内容加载。以下是几种常见的方法：
基于路由的分站
通过 Vue Router 实现不同站点的路由隔离，每个分站有独立的路由前缀或子域名。
const router = new VueRouter({
routes: [
{
path: '/site1',
component: Site1Layout,
children: [...site1Routes]
},
{
path: '/site2',
component: Site2Layout,
children: [...site2Routes]
}
]
})动态配置加载
根据当前访问的域名或路径动态加载不同的配置和组件。
const siteConfig = {
'site1.example.com': {
theme: 'blue',
apiBase: '/api/site1'
},
'site2.example.com': {
theme: 'red',
apiBase: '/api/site2'
}
}
const currentSite = siteConfig[window.location.hostname]多入口构建
使用 Webpack 的多入口配置为每个分站生成独立的构建包。
// vue.config.js
module.exports = {
pages: {
site1: {
entry: 'src/sites/site1/main.js',
template: 'public/site1.html'
},
site2: {
entry: 'src/sites/site2/main.js',
template: 'public/site2.html'
}
}
}环境变量控制
通过环境变量区分不同站点，动态加载对应资源。
// .env.site1
VUE_APP_SITE=site1
VUE_APP_API_BASE=/api/site1
// 代码中使用
const apiClient = axios.create({
baseURL: process.env.VUE_APP_API_BASE
})微前端架构
使用 qiankun 等微前端框架将各分站作为独立应用集成。
// 主应用
registerMicroApps([
{
name: 'site1',
entry: '//site1.example.com',
container: '#site1-container',
activeRule: '/site1'
}
])部署注意事项
- 确保服务器配置支持多站点路由重定向
- 静态资源路径需要根据分站进行调整
- 考虑使用 CDN 为不同分站提供资源
- 实现跨分站共享的公共组件和状态管理
以上方案可根据具体需求组合使用，实现灵活的分站架构。
