Vue中如何正确导出GISWSCaller函数？VSCode代码无法识别

架构老林

2026-7-19

正确导出GISWSCaller函数的实现方案

问题原因

代码在VSCode中显示为白色无法识别，核心原因是未将代码正确包裹在Vue单文件组件的<script>标签内，或者标签配置不符合规范，导致编辑器无法识别为有效Vue脚本代码。

修正后的完整.vue代码实现

<template>
  <!-- 组件模板内容，若无需求可留空 -->
</template>

<script>
import { provide } from 'vue';

export default function GISWSCaller() {
  async function fetchURL(params) {
    console.log("params:", params);
    
    const splitted = params.split(',');
    if (splitted.length === 4) {
      const response = await fetch(`https://xx/xx/getDistanceFromOriginToDestination/${params}`);
      const res = await response.json();
      return res;
    }
    return false;
  }

  const ctx = {
    fetchURL
  };

  provide('GISWSContext', ctx);
  return fetchURL;
}
</script>

关键优化与修正点

将代码完整包裹在<script>标签内，确保VSCode能识别为Vue脚本
将原全局变量res移至fetchURL函数内部，避免多次调用GISWSCaller时的变量污染
使用模板字符串拼接URL，提升代码可读性与维护性

更推荐的Vue 3 `<script setup>`写法

如果使用Vue 3+版本，<script setup>语法更简洁，编辑器识别度更高：

<template>
  <!-- 模板内容，若无需求可留空 -->
</template>

<script setup>
import { provide } from 'vue';

async function fetchURL(params) {
  console.log("params:", params);
  
  const splitted = params.split(',');
  if (splitted.length === 4) {
    const response = await fetch(`https://xx/xx/getDistanceFromOriginToDestination/${params}`);
    return await response.json();
  }
  return false;
}

const ctx = { fetchURL };
provide('GISWSContext', ctx);

// 对外导出GISWSCaller函数
export function GISWSCaller() {
  return fetchURL;
}
</script>