Nuxt应用中如何加载包含ActiveX控件的HTML4内容并调用其接口

报错原因排查 #

你遇到的ReferenceError File is not defined报错，是因为Nuxt的pages目录默认用于存放.vue单文件组件，直接放入原生HTML文件会被Nuxt的服务端渲染(SSR)逻辑错误解析，且ActiveX控件仅能在客户端IE内核环境下运行，SSR阶段无法识别浏览器端专有对象，就会抛出引用错误。

实现方案 #

方案1：直接在Vue页面中嵌入（推荐）

无需单独创建HTML文件，直接在需要调用ActiveX的页面组件内编写逻辑即可：

1. 在<template>中插入object标签，添加客户端渲染判断，避免SSR阶段加载：

<template>
  <div>
    <!-- 页面其他业务内容 -->
    <OBJECT 
      ID="SAMPLE_API" 
      CLASSID="CLSID:AnGUID" 
      width="0" 
      height="0"
      v-if="process.client"
    ></OBJECT>
  </div>
</template>

2. 在mounted生命周期中调用ActiveX方法，仅在客户端执行逻辑：

<script>
export default {
  mounted() {
    // 过滤服务端执行场景
    if (!process.client) return
    // 确保ActiveX对象已挂载到全局
    if (window.SAMPLE_API) {
      const ticket = window.SAMPLE_API.GetTicket("APP_ID")
      // 后续业务逻辑处理
    }
  }
}
</script>

方案2：使用独立HTML文件

如果必须使用单独的HTML文件承载ActiveX逻辑：

• Nuxt2：将HTML文件放入项目根目录的static文件夹下
• Nuxt3：将HTML文件放入项目根目录的public文件夹下
  该目录为静态资源目录，不会被Nuxt的SSR路由解析，可直接通过项目域名/你的HTML文件名访问。

注意事项 #

• ActiveX控件仅支持IE内核浏览器，Chrome、Edge、Firefox等现代浏览器默认不支持，需要用户手动开启IE兼容模式或使用IE浏览器访问
• 调用前需确认用户已正确安装对应ActiveX控件，且浏览器安全设置允许ActiveX控件运行

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