如果 import('@/path/to/remote/component') 里面出现了变量还是不行

如果 `import('@/path/to/remote/component')` 中需要使用变量，由于 `import` 语句是在编译时执行的，不能动态传递变量。

在这种情况下，你可以使用 `require.ensure` 或者 `import()` 的动态导入来实现动态引入远程组件并传递变量。

下面是一个示例代码，演示了如何使用 `require.ensure` 或者 `import()` 来动态引入远程组件，并传递变量作为参数：

const remoteComponentName = 'RemoteComponent';

const loadRemoteComponent = async (variable) => {
  // 使用 require.ensure
  return new Promise((resolve) => {
    require.ensure([], () => {
      const RemoteComponent = require(`@/path/to/remote/component/${variable}`).default;
      resolve(RemoteComponent);
    });
  });

  // 或者使用 import()
  // return import(`@/path/to/remote/component/${variable}`);
};

const asyncComponent = defineAsyncComponent(() => ({
  component: loadRemoteComponent(remoteComponentName),
  loadingComponent: /* 设置加载状态时显示的组件 */,
  errorComponent: /* 设置加载错误时显示的组件 */,
  delay: /* 设置延迟时间 */,
  timeout: /* 设置超时时间 */,
}));

// 使用 asyncComponent
<template>
  <async-component :component="asyncComponent" />
</template>

export default {
  components: {
    AsyncComponent: asyncComponent,
  },
  data() {
    return {
      asyncComponent: null,
    };
  },
  created() {
    this.asyncComponent = asyncComponent;
  },
};

在上述示例代码中，我们使用 `require.ensure` 或者 `import()` 来动态引入远程组件，并传递变量 `remoteComponentName` 作为参数。然后将异步加载的组件赋值给 `asyncComponent`，并在组件中使用 `async-component` 组件渲染。

请注意，使用 `require.ensure` 或者 `import()` 的方式来动态导入远程组件需要根据具体情况进行选择和调整。此外，也需要确保远程组件的路径和变量的使用是正确的。