Vue 实现分站的方法

使用 Vue 实现分站可以通过多种方式完成，具体取决于项目的需求和架构设计。以下是几种常见的方法：

多入口配置

在 Vue 项目中，可以通过配置多个入口文件来实现分站。每个入口文件对应一个独立的分站，共享部分公共代码。

1. 修改 vue.config.js 文件，配置多个入口：

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

2. 在 src 目录下创建对应的分站目录结构，如 siteA 和 siteB，每个目录包含自己的 main.js 和 App.vue。

动态路由

如果分站内容差异不大，可以通过动态路由实现分站功能。在路由配置中根据不同的域名或路径加载不同的组件。

1. 在 router/index.js 中配置动态路由：

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

2. 在 main.js 中根据当前域名或路径动态设置路由基路径：

   
   const hostname = window.location.hostname;
   let basePath = '/';

if (hostname.includes('siteA')) { basePath = '/siteA'; } else if (hostname.includes('siteB')) { basePath = '/siteB'; }

const router = new VueRouter({ mode: 'history', base: basePath, routes });

#### 微前端架构

对于大型项目，可以考虑使用微前端架构实现分站。每个分站作为一个独立的微应用，通过主应用进行集成。

1. 使用 `qiankun` 等微前端框架注册子应用：
```javascript
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'siteA',
    entry: '//localhost:7101',
    container: '#siteA-container',
    activeRule: '/siteA'
  },
  {
    name: 'siteB',
    entry: '//localhost:7102',
    container: '#siteB-container',
    activeRule: '/siteB'
  }
]);

start();

1. 每个分站作为独立的 Vue 项目开发，通过主应用的路由规则加载对应的子应用。

环境变量控制

通过环境变量控制不同分站的构建和运行行为，实现一套代码支持多个分站。

1. 在项目根目录创建 .env.siteA 和 .env.siteB 文件：

   
   # .env.siteA
   VUE_APP_SITE_NAME=siteA
   VUE_APP_API_BASE=https://api.siteA.com

.env.siteB

VUE_APP_SITE_NAME=siteB VUE_APP_API_BASE=https://api.siteB.com

2. 在 `vue.config.js` 中根据环境变量修改构建配置：
```javascript
const site = process.env.VUE_APP_SITE_NAME;

module.exports = {
  publicPath: `/${site}`,
  outputDir: `dist/${site}`
}

1. 在代码中通过 process.env.VUE_APP_SITE_NAME 判断当前分站，加载不同的配置或组件。

多语言支持扩展

如果分站主要是语言或地区差异，可以使用 Vue I18n 等国际化方案实现分站功能。

1. 安装 vue-i18n 并配置多语言：

   
   import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({ locale: navigator.language || 'en', messages: { en: require('./locales/en.json'), zh: require('./locales/zh.json') } });

2. 根据用户访问的域名或路径设置对应的语言环境：
```javascript
const hostname = window.location.hostname;
if (hostname.includes('.cn')) {
  i18n.locale = 'zh';
} else {
  i18n.locale = 'en';
}

以上方法可以根据项目需求单独使用或组合使用，实现灵活的分站架构。