如何在Nuxt中部署Office Add-in？Vue迁移遇未定义错误

问题原因 #

你的插件代码执行时，Office.js脚本还未完成加载，导致window.Office为undefined，进而触发Cannot read properties of undefined (reading 'onReady')错误。Nuxt的客户端插件默认在页面初始化阶段执行，但Office.js需要额外加载时间，且微软Office Add-in要求必须先加载Office.js才能访问Office对象。

解决方案 #

1. 确保Office.js正确引入 #

在Nuxt的入口模板文件（app.html，无则在项目根目录创建）中，手动添加Office.js加载脚本到<head>标签内：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <!-- 引入Office.js -->
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"></script>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

2. 调整插件代码，等待Office.js加载完成 #

修改plugins/office.js代码，确保Office对象可用后再执行初始化逻辑：

export default defineNuxtPlugin(() => {
  function initOffice() {
    window.Office.onReady(() => {
      alert("office is ready");
      // 此处可添加Office Add-in初始化逻辑
      // 比如组件挂载、功能初始化等
    });
  }

  // 检查Office是否已加载，未加载则监听OfficeReady事件
  if (typeof window.Office !== 'undefined') {
    initOffice();
  } else {
    document.addEventListener('OfficeReady', initOffice);
  }
});

3. 修正Nuxt配置中的插件路径 #

检查nuxt.config.js中的插件路径，确保与实际文件一致（你当前配置的是outlook.js，但实际文件为office.js）：

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/office.js', mode: 'client' },
  ],
});

补充说明（针对Nuxt 2） #

若使用Nuxt 2，插件代码需调整为：

export default ({ app }) => {
  function initOffice() {
    window.Office.onReady(() => {
      alert("office is ready");
    });
  }

  if (typeof window.Office !== 'undefined') {
    initOffice();
  } else {
    document.addEventListener('OfficeReady', initOffice);
  }
};

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