基于VueJS框架创建Microsoft Teams标签页应用及本地测试咨询

核心问题解答 #

• 是否支持本地测试自定义Teams应用？
  完全支持，不需要先部署到Azure静态网站。Teams要求应用前端页面必须通过HTTPS访问，本地开发服务默认是HTTP，只需用隧道工具将本地服务暴露为公网HTTPS地址即可。

• Azure静态网站是不是必经之路？
  不是。Azure静态网站只是Teams应用的部署选项之一，开发阶段完全可以本地测试；部署时也可以选择GitHub Pages、Netlify等其他支持HTTPS的静态托管服务，只要满足应用端点可通过HTTPS访问即可。

本地测试具体步骤 #

1. 启动本地Vue服务
   确保你的Vue项目能正常运行：

   npm run serve
   

   此时本地服务地址通常为http://localhost:8080。

2. 用ngrok创建HTTPS隧道
   安装ngrok后，运行以下命令将本地端口映射为公网HTTPS地址：

   ngrok http 8080
   

   执行后会生成一个类似https://abc123.ngrok.io的HTTPS地址，复制该地址。

3. 修改Teams应用Manifest文件
   打开manifest.json，将所有涉及页面地址的字段（如contentUrl、configurationUrl）替换为刚才的ngrok地址，确保没有使用本地HTTP地址。

4. 重新打包应用
   将manifest.json、应用图标等必要文件打包为ZIP包（注意：文件必须直接放在ZIP根目录，不要嵌套在文件夹里）。

5. 上传到Teams测试
   在Teams客户端中，点击「应用」→「管理应用」→「上传自定义应用」，选择刚才打包的ZIP文件，即可加载本地运行的Vue应用进行测试。

常见上传错误排查 #

• 确保manifest文件中的所有URL都是HTTPS协议，Teams不接受HTTP地址。
• 检查ZIP包结构：不要将manifest文件放在子文件夹中，必须直接在ZIP根目录。
• 确认ngrok隧道处于活跃状态，本地Vue服务没有停止。

内容的提问来源于stack exchange，提问作者de-bugged