VueJS调用本地Delphi应用程序本质上与 js 调用本地 exe 程序的原理是相同的。通用的做法是通过在 Windows 注册表中注册自定义URL Protocol 协议，然后通过浏览器执行打开对应的协议即可。

3.1创建 Delphi 窗体应用程序

Delphi 窗体应用程序接受 1 个来自网络调用的参数，并将参数值显示在界面上。

第一步，先创建窗体应用程序，在窗体应用程序中放置一个 Label，其 Caption 属性值为“Web传入的参数”，一个 Edit 控件，其 name 属性值为 Edit1；

第二步，编写窗体的 OnCreate 事件，代码如下：

procedure TForm1.FormCreate(Sender: TObject);begin  // 检查命令行参数是否为1，不为1则终止程序的执行  if Application.ParamCount <> 1 then  begin    ShowMessage('参数错误, 格式：democalledbyvue <参数1>');    Application.Terminate;  end;  // 将命令行参数值显示在窗体的 Edit1 控件中  Edit1.Text:=TIdURI.URLDecode(Application.Params[1]);end;

URL解码采用了 indy 包中的 TIdURI 类的 URLDecode 方法。

3.2编写自定义URL Protocol 协议

自定义URL Protocol 协议模板：

Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\<协议名称>]@="URL:<协议名称> Protocol Handler""URL Protocol"= "" [HKEY_CLASSES_ROOT\<协议名称>\DefaultIcon]@="<可执行程序>" [HKEY_CLASSES_ROOT\<协议名称>\shell]@= "" [HKEY_CLASSES_ROOT\<协议名称>\shell\open]@= "" [HKEY_CLASSES_ROOT\<协议名称>\shell\open\command]@="\"<可执行程序>\" \"%1\""

将模板文件中的 <协议名称> 和 <可执行程序> 替换为实际名称即可。注：<可执行程序> 为可执行程序文件的全路径名称，其中的路径分隔符 “\” 必须转义，写作 “\\”。

将模板文件保存为 .reg ，双击运行。

示例：

Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\democalledbyvue]@="URL:democalledbyvue Protocol Handler""URL Protocol"= "" [HKEY_CLASSES_ROOT\democalledbyvue\DefaultIcon]@="E:\\workspace_of_codetyphon\\democalledbyvue\\democalledbyvue.exe" [HKEY_CLASSES_ROOT\democalledbyvue\shell]@= "" [HKEY_CLASSES_ROOT\democalledbyvue\shell\open]@= "" [HKEY_CLASSES_ROOT\democalledbyvue\shell\open\command]@="\"E:\\workspace_of_codetyphon\\democalledbyvue\\democalledbyvue.exe\" \"%1\""

在 Vue 创建的项目中的页面上添加一个链接、一个文本框、一个按钮控件，实现点击链接后调用 3.1 中创建的应用程序并传递固定的参数，在文本框中输入文本，单击按钮调用 3.1 中创建的应用程序并传递文本框中输入的内容，代码如下：

<template>  <div style="padding: 24px;">    <a href="democalledbyvue://这是从Web传递的参数/11570d2c987ef23a609e" >调用本地exe</a>    <div style="padding: 12px;">      <InputText type="text" v-model="param" />    </div>    <Button label="调用本地exe" @click="call_local_exe"/>  </div></template><script>import {ref} from "vue"import Button from 'primevue/button'import InputText from 'primevue/inputtext'export default {  name: "IndexPage",  components: {    Button,    InputText,  },  setup () {    const param = ref('')    function call_local_exe () {      window.open('democalledbyvue://' + param.value)    }    return {      param, call_local_exe    }  }}</script><style scoped></style>

在 js 中关键就是通过自定义协议 democalledbyvue:// 来调用。

3.4 运行效果

Web 页面：

本地应用程序：

从执行结果我们可以看出，每次调用都会打开以一个本地应用程序的实例。