如何在现有Vue 3应用中集成使用Meteor？

一、Meteor 后端服务配置（解决客户端代码移除疑问） #

• 安装Meteor
  macOS/Linux 执行命令：curl https://install.meteor.com/ | sh，Windows 直接使用官方安装包完成安装。
• 初始化无客户端的Meteor项目
  直接执行 meteor create meteor-backend --bare 生成纯后端模板项目，默认没有客户端相关代码，无需额外删除。
  如果已经创建了普通Meteor项目，可按以下操作禁用客户端：
  1. 删除项目根目录下的client文件夹
  2. 在package.json中添加配置，关闭客户端构建：

  {
    "meteor": {
      "clientEntry": false
    }
  }
  

• 配置跨域支持
  在Meteor项目server/main.js中添加跨域配置，允许Vue3前端访问：

  import { WebApp } from 'meteor/webapp';
  
  WebApp.rawConnectHandlers.use((req, res, next) => {
    // 生产环境替换为你的Vue3前端部署域名
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
  });
  

• 正常开发后端逻辑
  按Meteor官方规范定义集合、发布订阅、Method方法即可，所有后端代码统一放在server目录下。

二、Vue3 端集成Meteor响应式能力 #

这里采用SimpleDDP对接Meteor的DDP协议，实现响应式数据同步：

• 安装依赖
  执行命令：npm install simpleddp simpleddp-plugin-login @vue/reactivity
• 封装DDP连接实例
  新建src/utils/meteor.js文件，初始化连接：

  import SimpleDDP from 'simpleddp';
  import loginPlugin from 'simpleddp-plugin-login';
  import { ref, reactive } from 'vue';
  
  // 开发环境填本地Meteor地址，生产环境替换为线上Meteor服务地址
  export const meteor = new SimpleDDP({
    endpoint: 'ws://localhost:3000/websocket',
    SocketConstructor: WebSocket,
    reconnectInterval: 5000
  }, [loginPlugin]);
  
  // 封装响应式订阅方法，适配Vue3响应式
  export function useMeteorSubscribe(pubName, params = []) {
    const loading = ref(true);
    const data = reactive([]);
    const error = ref(null);
  
    (async () => {
      try {
        const sub = await meteor.subscribe(pubName, ...params).ready();
        const collection = meteor.collection(pubName);
        // 监听数据变化更新响应式数据
        collection.onChange(({newState}) => {
          data.splice(0, data.length, ...newState);
        });
        data.push(...collection.fetch());
        loading.value = false;
      } catch (e) {
        error.value = e;
        loading.value = false;
      }
    })();
  
    return { loading, data, error };
  }
  
  // 封装Meteor Method调用
  export function callMeteorMethod(methodName, params = []) {
    return meteor.call(methodName, ...params);
  }
  

• 业务中使用示例
  在Vue组件中直接调用封装好的方法即可：

  <script setup>
  import { useMeteorSubscribe, callMeteorMethod } from '@/utils/meteor';
  
  const { loading, data: taskList } = useMeteorSubscribe('tasks', [10]);
  
  const addTask = async () => {
    await callMeteorMethod('tasks.add', ['新任务']);
  }
  </script>
  

三、独立部署实现 #

Meteor 后端部署 #

1. 执行命令构建纯后端包：meteor build ../build-output --server-only
2. 将生成的tar包上传到服务器，解压后执行npm install安装依赖
3. 配置环境变量MONGO_URL（MongoDB连接地址）、ROOT_URL（后端服务域名），执行node main.js启动服务即可。

Vue3 前端部署 #

1. 将src/utils/meteor.js中的连接地址替换为线上Meteor服务地址
2. 执行npm run build打包生成dist目录
3. 将dist目录部署到Nginx、静态托管服务即可，无需额外配置。

补充说明 #

当前纯后端对接模式是最稳定的兼容方案，无需等待官方Vue3适配即可全量使用Meteor的后端能力，后续如果需要更深度的集成，可以使用社区维护的Vue3适配版本的meteor-vue包，支持Composition API写法。

内容的提问来源于stack exchange，提问作者Arikael