当前位置：首页 > VUE

vue 多站点实现

2026-01-18 16:43:19VUE

Vue 多站点实现方案

方案一：多入口配置

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

修改 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'
 }
}
}

目录结构建议

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

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

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

主应用配置

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

使用微前端架构
```
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框架实现服务端多站点渲染。

Nuxt配置示例

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

启动命令配置

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

部署注意事项

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

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

vue 多站点实现