Vue 3可运行Office Add-ins，Nuxt 3(TypeScript)实现遇阻求解决方案

背景 #

已能在Vue 3（JavaScript）环境中成功运行Office Add-ins，但迁移到Nuxt 3（TypeScript）时遇到类型错误：
Property 'Office' does not exist on type 'Window & typeof globalThis'.ts(2339)
虽已安装@types/office-js，但不清楚正确的配置方式，需要可行的配置示例。

Vue 3（JavaScript）可行配置流程 #

• 执行vue create test-addin创建项目
• 运行yo office并仅选择生成manifest文件
• 无需额外插件，直接在./src/main.js中通过window.Office.onReady()挂载应用

Nuxt 3（TypeScript）解决方案 #

1. 类型声明配置 #

确保TypeScript能识别window.Office的类型：

• 确认已安装类型包：npm install @types/office-js --save-dev
• 修改nuxt.config.ts，将@types/office-js添加到类型配置中：

export default defineNuxtConfig({
  types: ['@types/office-js'],
  // 若Add-in无需服务端渲染，可禁用SSR避免window对象相关问题
  ssr: false
})

2. 客户端安全初始化Office Add-in #

由于Nuxt 3默认启用SSR，服务端环境不存在window对象，需确保Office相关代码仅在客户端执行：

方案一：使用客户端插件

在项目plugins目录下创建office.client.ts（后缀.client.ts表示仅在客户端加载）：

export default defineNuxtPlugin(() => {
  window.Office.onReady((info) => {
    // 根据宿主类型执行初始化逻辑
    switch (info.host) {
      case Office.HostType.Excel:
        console.log('Excel Add-in 已就绪');
        break;
      case Office.HostType.Word:
        console.log('Word Add-in 已就绪');
        break;
      // 其他宿主类型处理
    }
  })
})

方案二：在组件的客户端钩子中初始化

在app.vue或业务组件中使用onMounted钩子（仅在客户端触发）：

<script setup lang="ts">
import type { Office } from 'office-js'

onMounted(() => {
  window.Office.onReady((info: Office.ReadyInfo) => {
    // 初始化你的应用逻辑
    console.log(`当前Office宿主: ${info.host}`)
  })
})
</script>

<template>
  <div>
    <h1>Nuxt 3 Office Add-in</h1>
    <!-- Add-in UI内容 -->
  </div>
</template>

3. 完整项目配置示例 #

1. 创建Nuxt 3项目：npx nuxi init nuxt-office-addin
2. 进入目录安装依赖：cd nuxt-office-addin && npm install
3. 安装类型包：npm install @types/office-js --save-dev
4. 修改nuxt.config.ts添加类型配置（如步骤1所示）
5. 运行yo office生成manifest文件（仅选择manifest选项）
6. 添加客户端插件或组件初始化逻辑（如步骤2所示）
7. 启动项目：npm run dev

关键说明 #

• 禁用SSR（ssr: false）可避免服务端渲染时的window对象不存在问题，适合纯客户端的Office Add-in场景
• 确保所有调用window.Office的代码都在客户端环境执行，可通过process.client判断或使用.client.ts后缀的插件

内容的提问来源于stack exchange，提问作者Ömer ÇELEBİ