vue 获取组件路径_你知道如何获取 vue 组件自身源码路径吗？

  作者：D2Projects 成员 | Aysnine

  点击文章末尾查看原文跳转至作者原网页

---

这个问题要从一个想法说起。

D2Admin^[1] 是一个开源的，前端中后台集成方案，原先是基于 vue-cli2，大概是向 vue-cli3 过渡时， 作者老李，想在页面右下角加个 Toggle 点击，跳到当前页面源码对应的 github 页面。

确实很实用的功能，D2Admin 的 Demo 页面太多了，想看某个页面的源码，对于不熟悉项目目录结构的新手很不友好。

这些页面统一为 .vue 组件，那么转换一下：如何获取 vue 单文件自身源码路径？

目前经历了三个方案，最终目标是把自身路径赋值到 this.$options.__source 上。目前方案 3 是最新的。

方案 1 ：node + __filename

直接使用 node 中的 __filename 变量：

{ { $options.__source }}

export default { mounted() { this.$options.__source = __filename }}

因为 webpack 编译时，会把源码文件在内部转为 node 模块，.vue 文件中的 script 内容也被转换了， 其中的 __filename 在编译时被运行，直接得到当前文件自身路径。

使用这个变量还需要在 webpack 配置中启用 node.__filename：

<