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\""

3.3编写 VueJS 页面

在 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 页面：

本地应用程序：

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