如何查询Vue单文件组件的本地源码路径？

本文共计1393个文字，预计阅读时间需要6分钟。

这个问题需要从创意角度出发。D2Admin 是一个开源的前后端集成方案，最初基于 vue-cli2 构建，正逐步过渡到 vue-cli3。作者老李希望在页面右下角添加一个 Toggle 按钮，点击后直接跳转到当前页面的源代码。

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

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

确实很实用的功能，D2Admin 的 Demo 页面太多了，想看某个页面的源码，对于不熟悉项目目录结构的新手很不友好。
这些页面统一为 .vue 组件，那么转换一下：如何获取 vue 单文件自身源码路径？

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

方案 1 ：node + __filename

直接使用 node 中的 __filename 变量：

<template> <h1>{{ $options.__source }}</h1> </template> <script> export default { mounted() { this.$options.__source = __filename } } </script>

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