在构建的 vue3/vite 应用程序中访问当前模块名称答案

【问题标题】：Access current module name in built vue3/vite application在构建的 vue3/vite 应用程序中访问当前模块名称
【发布时间】：2021-05-22 06:08:01
【问题描述】：

在我的 vue3/vite/typescript 应用程序中，我使用import.meta.url 并提取文件名以获取当前模块的名称：

文件'myModule.ts'：

export default {
  url: import.meta.url
}

文件'test.ts'：

import myModule from "./myModule"

console.log(myModule.url)

这很好用，只要我运行开发服务器（它实际上导入模块），但如果我使用构建版本会失败。原因是，构建版本是使用 rollup.js 创建的，它创建一个文件并且不再真正导入任何内容。

但是在这种情况下我怎么可能得到模块的名称呢？我可以以某种方式保持import.meta 的工作，还是有其他方法可以实现这一点（除了在url 属性中复制文件名）？

【问题讨论】：

如果包被特定于构建它的系统的路径污染，那将是一个问题。 Rollup 可以配置为执行此操作，但最直接的方法是硬编码名称。
我的用例需要很多文件，这些文件应该很容易通过它们的名称来识别，但是我在相应的模块中也需要这个名称。在 Node.Js 中，使用 __filename 会很容易，但在这里不可用。当模块内的文件名加倍时，风险是名称不同。
我很高兴被证明不是这样，但是这种 Node 行为是它固有的，通常不适用于其他环境，尤其是浏览器。正如我所说，你最终会用大量不必要的元数据填充你的包，这些元数据不能被缩小并且可能是敏感的，具体取决于实际路径。可能可以通过使用模块名称提供的动态导入来反向解决，在这种情况下无法说明它将如何影响捆绑包。也可以查看github.com/rollup/rollup/issues/2748
谢谢@EstusFlask，github问题的链接看起来很有趣，我希望有这样的东西！但事实上，动态导入的想法似乎非常适合我的用例——我会在这里坚持下去。
动态导入的问题在于它们是异步的，但这可能不是问题，具体取决于您的情况，顶级等待已经存在并且可以替换导入语句。

【解决方案1】：

使用 getCurrentInstance 这拥有 Options API this 的大部分功能

import {
  getCurrentInstance
} from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance();
  }
}

然后在这个对象中做一些挖掘来找到你的组件的名字！

【讨论】：