vue 多站点 实现

Vue 多站点实现方案

方案一：多入口配置

通过配置多个入口文件实现多站点，适用于站点间差异较大的场景。

1. 修改 vue.config.js 配置

   module.exports = {
   pages: {
    siteA: {
      entry: 'src/siteA/main.js',
      template: 'public/siteA.html',
      filename: 'siteA.html'
    },
    siteB: {
      entry: 'src/siteB/main.js',
      template: 'public/siteB.html',
      filename: 'siteB.html'
    }
   }
   }

2. 目录结构建议

   src/
   siteA/
    main.js
    App.vue
    components/
   siteB/
    main.js
    App.vue
    components/
   public/
   siteA.html
   siteB.html

方案二：动态路由+微前端

适用于站点间共享大部分功能的场景，通过路由区分不同站点。

1. 主应用配置

   const routes = [
   {
    path: '/siteA/:pathMatch(.*)*',
    component: () => import('@/views/SiteA.vue')
   },
   {
    path: '/siteB/:pathMatch(.*)*',
    component: () => import('@/views/SiteB.vue')
   }
   ]

2. 使用微前端架构

   

   
   import { loadMicroApp } from 'qiankun'

const siteAApp = loadMicroApp({ name: 'siteA', entry: '//localhost:7101', container: '#siteA-container' })

#### 方案三：环境变量控制
通过环境变量区分不同站点，适合开发阶段快速切换。

1. 创建环境文件
`.env.siteA`

VUE_APP_SITE=siteA

`.env.siteB`

VUE_APP_SITE=siteB

2. 代码中动态加载配置
```javascript
const siteConfig = require(`./configs/${process.env.VUE_APP_SITE}.js`)

方案四：SSR多站点

使用Nuxt.js等SSR框架实现服务端多站点渲染。

1. Nuxt配置示例

   export default {
   buildModules: [
    ['@nuxtjs/router', {
      path: 'router',
      fileName: `${process.env.SITE_NAME}.js`
    }]
   ]
   }

2. 启动命令配置

   {
   "scripts": {
    "dev:siteA": "SITE_NAME=siteA nuxt",
    "dev:siteB": "SITE_NAME=siteB nuxt"
   }
   }

部署注意事项

1. Nginx配置示例

   
   server {
   listen 80;
   server_name siteA.com;
   root /path/to/dist/siteA;
   }

server { listen 80; server_name siteB.com; root /path/to/dist/siteB; }

2. CI/CD流水线配置
```yaml
jobs:
  deploy-siteA:
    variables:
      SITE_NAME: "siteA"
    script:
      - npm run build:$SITE_NAME
      - scp -r dist/$SITE_NAME user@server:/path/to/deploy

以上方案可根据实际项目需求组合使用，建议小型项目采用方案一或方案三，大型复杂系统考虑方案二或方案四。