vue 多站点 实现
Vue 多站点实现方法
在 Vue 项目中实现多站点通常涉及配置、路由管理和构建优化。以下是几种常见方法：
基于环境变量的多站点配置
通过环境变量区分不同站点，动态加载配置。在项目根目录创建 .env 文件：
VUE_APP_SITE_ID=site1在代码中通过 process.env.VUE_APP_SITE_ID 读取变量，动态加载对应配置：
const siteConfig = {
site1: { apiBase: 'https://api.site1.com' },
site2: { apiBase: 'https://api.site2.com' }
};
const currentConfig = siteConfig[process.env.VUE_APP_SITE_ID];动态路由与懒加载
通过路由配置实现多站点内容分发。在 router/index.js 中：
const routes = [
{
path: '/site1',
component: () => import('@/views/Site1.vue'),
meta: { site: 'site1' }
},
{
path: '/site2',
component: () => import('@/views/Site2.vue'),
meta: { site: 'site2' }
}
];Webpack 多入口配置
修改 vue.config.js 实现多入口打包：
module.exports = {
pages: {
site1: {
entry: 'src/main-site1.js',
template: 'public/index-site1.html'
},
site2: {
entry: 'src/main-site2.js',
template: 'public/index-site2.html'
}
}
};微前端架构
使用 qiankun 等微前端框架集成多个 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();共享组件与隔离样式
通过 CSS 命名空间隔离不同站点样式：
// site1.scss
.site1 {
.header { background: blue; }
}
// site2.scss
.site2 {
.header { background: red; }
}在组件中动态绑定 class：
<template>
<div :class="`${siteId}`">
<div class="header"></div>
</div>
</template>注意事项
- 公共依赖应通过
externals或 CDN 引入避免重复打包 - 站点差异较大时建议拆分为独立仓库
- 持续集成时需配置多环境部署流程
- 考虑使用 monorepo 管理多站点公共代码
以上方法可根据实际项目需求组合使用，小型项目推荐环境变量方案，复杂系统建议采用微前端架构。
